How to keep input style in a focused state? - css

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?

Answer 1

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