Question

I have a select drop down with the default title Country as grey.
However the grey only shows up when you click into the field.
How can i have the visible field with the default as grey so that it matches other fields?

.form_0{color:#777;}

<select value='country' id='country' name='Country'>
    <option class='country' disabled='disabled' selected='selected' class='form_0'>Country</option>
    <option class='country'>Brazil</option>
    <option class='country'>China</option>
    <option class='country'>India</option>
    <option class='country'>Spain</option>
    <option class='country'>USA</option>
    <option class='country'>Japan</option>
    <option class='country'>Russia</option>
</select>

Answer 1

Something like this maybe :

$("#country").on('change', function() {
    $(this).toggleClass("empty", this.value == "0");
}).change();​

You’ll need to add values to your select, and change it a little bit:

<select id='country' name='Country'>
    <option value="0" class='country' selected='selected'>Country</option>
    <option value="1" class='country'>Brazil</option>
    <option value="2" class='country'>China</option>
    <option value="3" class='country'>India</option>
    <option value="4" class='country'>Spain</option>
    <option value="5" class='country'>USA</option>
    <option value="6" class='country'>Japan</option>
    <option value="7" class='country'>Russia</option>
</select>​

As a sidenote, you can’t define class twice, you define two classes but doing:

<option class='country form_0'></option>

in the same decleration seperated by a space, two class declerations won’t work.

DEMONSTRATION