how to use focus and placeholder selectors together

Question

.profile_input {
    width:290px;
    height:25px;
    text-align: left;;
    font-family:'Arial';
    font-size: 13px;
    color:  #D1D3D4;
    font-style:normal;
    font-weight:normal;
    text-decoration:none;
}

.profile_input_focused::-webkit-input-placeholder { /* WebKit browsers */
    color:    #BCBEC0;
}
.profile_input_focused:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #BCBEC0;
}
.profile_input_focused::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #BCBEC0;
}
.profile_input_focused:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #BCBEC0;
}
.profile_input_focused {
    color:    black;
}

The above is my css.

Whenever, .profile_input is focused, I need to use jQuery to add another class .profile_input_focused.

When .profile_input no longer is focused, I use jQuery to remove the .profile_input_focused class.

I was wondering if there is a way in css that I can have both the focus and the placeholder selectors be used together hence eliminating my jQuery.

Answer 1

You should just be able to do something like this:

input:focus::-webkit-input-placeholder

(with the other vendor prefixes included of course)

http://jsfiddle.net/jBHB2/