How to keep input style in a focused state?

Question

http://codepen.io/leongaban/pen/NqzxPR?editors=110

I have a form which 2 inputs, once the user highlights (:focus) an input and starts typing, the text turns white.

body {
  font-family: Arial, sans-serif;
  background: #3D3D3D;
}

.login-form {
  margin-top: 20px;
}
.login-form input {
  margin-bottom: 20px;
  width: 416px;
  height: 40px;
  font-size: em(20);
  text-indent: 15px;
  color: #656565;
  background: #3D3D3D;
  border: 1px solid #656565;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.login-form input[value], .login-form input:focus, .login-form input:active {
  color: #fff;
  border: 1px solid #fff;
}
input .login-form[value] {
  color: #fff;
  border: 1px solid #fff;
}

.login-btn {
  padding: 12px 0;
  width: 420px;
  color: #00D88C;
  background: #3D3D3D;
  border: 2px solid #00D88C;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.login-btn:hover {
  color: #fff;
  background: #00D88C;
}

However after finishing typing and then tabbing to the next input, the first input loses it's style. What is the pseudo selector I need to insure that the first input keeps it's :focus style?

Is there a way to style the "unfocused but filled out state" of an input?

score 2 · Accepted Answer · answered Jul 13 '15 at 15:22

2

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;
}

answered Jul 13 '15 at 15:22

Joel Almeida

7,939
5
25
51

Ah thanks! Hmm now is there a way to have the border stay white? Ideally the white border should not be there, unless it's active and filled out. – Leon Gaban Jul 13 '15 at 15:26
1

If you want the border also there's no css way of doing that, at least that I'm aware of. So probably JS is the answer. If you add the required attribute you can use `:valid`. http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css – Joel Almeida Jul 13 '15 at 15:29

How to keep input style in a focused state?

1 Answers1