Input Has Different Style on Focus

Input has different style on focus

The Android-WebKit-Browser seems to add a special overlay box to the input type "password" on focus (I think to apply this special mobile masking where the last letter typed is still visible) which ignores all styling except the "-webkit-tap-highlight-color" property.

So you will be out of luck styling these input boxes. Btw. styling of input boxes doesn't work at all on devices with HTC Sense, have a look here:

Input-Elements in WebViews always have the same style if highlighted on HTC Devices

Oh, one exception: the stylings seem to work on samsung devices (at least on Galaxy S and I5800)

Add style to another element on focus on the input field

If you want to accomplish this without using Javascript then there is really only one option with your HTML structure, focus-within you can find more information on MDN, the support is now very good in modern browsers.

Check for focus-within on the .select2 span and select the next .bar element's :after and apply your styles there. If you need to support IE there are polyfills but then you'd be using Javascript either way so you might as well just use Javascript to manipulate your styles.

.select2:focus-within + .bar:after {
  width: 50%
}

.bar {
  position: relative;
  display: block;
  height: 50px;
}

.bar:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background-color: red;
  display: block;
  transition: .3s ease
}

<div class="floating-labels">
  <div class="form-group focused">
    <span class="select2 select2-container">
         <span class="selection">
            <span class="select2-selection">
                <ul class="select2-selection__rendered">
                    <li class="select2-search select2-search--inline">
                        <input class="select2-search__field" type="search">
                    </li>
                </ul>
            </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
    <span class="bar"></span>
  </div>
</div>

How to style a form element when an input is focused?

If the structure in your actual code is the same as what you've posted in question, you can use + (adjacent) selector to select the submit button when there's focus on text input.

This is the selector you're looking for: #example > input[type="text"]:focus + input[type="submit"]

To read more about + selector, this answer to "What does the “+” (plus sign) CSS selector mean?" explains it in a short manner and even covers browser support.

Here is a snippet to show it in action. Doesn't look too pretty, but does the job :)

#example > input[type="text"]:focus + input[type="submit"] {  background: gray;}

<form id="example">    <input type="text" name="search">    <input type="submit" value="Search"></form>

change separate element style on focus on other element

You can't. It's only possible if the element is a sibling or a child of the :focus.

Either use Javascript, or put put the div inside the nav (which might not be what you're looking for if you can't change your DOM tree).

#nav input[type=text]:focus~#two {
  color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
  <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
</div>

css selector when focus is removed from input

As per your requirement, this should work.
Add a class to your input element, and a onblur tag to it which would refer to a function in the javascript.
Thus the element would eventually look on the lines of this.

<input type="text" class="textField" onblur="focusToggle()" required>

In the script tag, write this function

function focusToggle()
  {document.querySelector(".textField").classList.add("outOfFocus");
  }

And in the css add a style definition for the new class

.outOfFocus{
  border-bottom: 2px solid red;
}

So finally, the whole thing would look something like this.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="field">
    <input type="text" class="textField" onblur="focusToggle()" required>
  </div>
    <script>
    function focusToggle()
      {document.querySelector(".textField").classList.add("outOfFocus");
      }
  </script>
</body>
</html>

And the final CSS.

input {
  border: none;
  border-bottom: 2px solid black;
  outline: none;
  transition: 0.4s ease-out;
}

input:focus {
  border-bottom: 2px solid blue;
}
.outOfFocus{
  border-bottom: 2px solid red;
}

Hope this helped. Happy Coding.

How to remove focus border (outline) around text/input boxes? (Chrome)

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

textarea:focus, input:focus{
    outline: none;
}

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

⚠️ Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

How to keep input style in a focused state?

You are doing this the wrong way.

You want the placeholders to be gray and text to be white.

So, style your placeholder with gray and let white be the main one. Like this:

input {
    color: white;
}
input[type=text]:-moz-placeholder {
    color: gray;
}
input[type=text]::-moz-placeholder {
    color: gray;
}
input[type=text]:-ms-input-placeholder {
    color: gray;
}
input[type=text]::-webkit-input-placeholder {
    color: gray;
}

Input Has Different Style on Focus