How to style select dropdown only when value is empty

Question

Lets say I have markup like this:

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>    
</select>

Now, I want the dropdown to display in gray ONLY when the value is empty i.e when it is showing "Select". When the user has selected one of the options, it should be black / default color.

(This is to be visually consistent with textboxes on my page that have gray placeholders).

I want to accomplish something like this:

select[value=""] {
    color: gray;
}

But it turns out that the select tag doesn't really have a value attribute.

Any way to accomplish this other than using JavaScript?

Do you just want the text of the word "Select" to be gray? Or do you want the background of that item to be gray? OR do you want the background of the entire dropdown box to be gray? — Frankenscarf, Mar 10 '14 at 05:50
I dont exactly mind, i just want to checkout pure-css options before i use js. With js this is straightforward. Thanks! — Natarajan Shanker, Mar 10 '14 at 06:07
I was able to find **(http://jsfiddle.net/Idered/LufkN/)** that might be the closest you'll come to achieving your desired effect without javascript. Hope it helps in some way. — Frankenscarf, Mar 10 '14 at 06:09
Thanks @Frankenscarf! Though it doesn't directly answer my question, thats an elegant dropdown! — Natarajan Shanker, Mar 10 '14 at 06:12
@Natarajan Shanker: Yea, that's why I didn't post it as an official "answer". Frankly it opens a whole new can of worms when it comes to form validation and getting the "selected value". — Frankenscarf, Mar 10 '14 at 06:19

score 1 · Answer 1 · answered Apr 14 '20 at 07:22

1

Try this code :

select > option[value=""]{
     color: gray;
}

answered Apr 14 '20 at 07:22

Purvi Barot

608
3
9

3

work only in the list, not the select itself. Firefox has is own style for list -> does nothing – atmacola Aug 28 '20 at 13:49

score 1 · Answer 2 · answered Jun 24 '21 at 15:08

You can use pseudo classes :first-child, :nth-child(1), :nth-of-type(1), if your empty option always will be on the first position. As I understand, option with empty value and text "Select" should be first, as default. In this case, we will be aware that.

score 1 · Answer 3 · answered Sep 23 '21 at 13:00

Styling options, will only style them as shown in the drop down list, not when the select is not in focus. I wanted the select to be italic when the blank option is shown, it can be achived like this:

/* If the select does not have a valid value, ie the blank option is selected, we make it italic */
select:invalid {
    font-style: italic;
}

/* Now the child options inherit the italics style, so we reset that*/
select > option {
    font-style: normal;
}

/* Apply italics to the invalid options too when shown in the dropdown */
select option[value=""], select option:not([value]) {
    font-style: italic;
}

user1647667 · Answer 4 · 2014-03-10T06:05:18.180

0

<select name="backGround" size="1" onChange="updateTextColour(this.value);"><!--changeColor(this.selected);"-->
            <option style="color:Gray">Select</option>
            <option style="color:Black">Value 1</option>
            <option style="color:Black">Value 2</option>
</option>
        </select></span></span></td>

edited Mar 10 '14 at 06:05

answered Mar 10 '14 at 05:49

user1647667

1,269
4
13
26

3

That's JavaScript. OP specifically mentioned a solution that's not JavaScript. – JW Lim Mar 10 '14 at 05:53
Hmm thanks yeah thats kinda my last resort, i'm wondering if theres a way to do this without JS. I find it weird that select shouldn't have a value attribute when input does. – Natarajan Shanker Mar 10 '14 at 05:54
let me check this out! – user1647667 Mar 10 '14 at 05:55
@NatarajanShanker That's because for `select`, the `value` is specified in each `option`, and not the `select` itself. – JW Lim Mar 10 '14 at 05:55

score 0 · Answer 5 · answered Aug 02 '21 at 01:55

Sweet and Simple, Just add below CSS will resolve your issue. I hope it'll help you out.

select option[value=""] {
  color: red;
}

Verified on Google Chrome: Version 92.0.4515.107 (Official Build) (64-bit)
Verified on Firefow: Version 90.0.2 (64-bit)

select option[value=""] {
  color: red;
}

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>    
</select>

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="">Two</option>  
    <option value="3">Three</option>  
    <option value="">Four</option>  
</select>

Does not solve OP question. When your code shows "Select", it is not red, only when the drop down is shown. — run_the_race, Sep 23 '21 at 12:52

How to style select dropdown only when value is empty

5 Answers5