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

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

i have form 2 inputs, once user highlights (:focus) input , starts typing, 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: 0.5s ease-out;   -ms-transition: 0.5s ease-out;   -o-transition: 0.5s ease-out;   transition: 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: 0.5s ease-out;   -ms-transition: 0.5s ease-out;   -o-transition: 0.5s ease-out;   transition: 0.5s ease-out; } .login-btn:hover {   color: #fff;   background: #00d88c; } 

however after finishing typing , tabbing next input, first input loses it's style. pseudo selector need insure first input keeps it's :focus style?

is there way style "unfocused filled out state" of input?

you doing wrong way.

you want placeholders gray , text white.

so, style placeholder gray , let white main one. 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; }