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

run_the_race · Answer 1 · 2022-09-08T17:40:42.660

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 (note the blank option must have value="" set):

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

<select required>
  <option value="">-- Please Select --</option>
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Or using onchange attribute (works without required attribute):

/* If the select does not have the attribute [data-empty="false"] */
select:not([data-empty="false"]) {
    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;
}

<select onchange="this.dataset.empty = this.value == ''">
  <option value="">-- Please Select --</option>
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

This doesn't work for me in chrome 103.0.5060.114 Mac. Could you provide a fiddle/codepen showing it working? — Timidfriendly, Jul 19 '22 at 10:41
@Timidfriendly the blank option must have `value=""`, added the code snippet above you can run. — run_the_race, Jul 19 '22 at 13:49
Only works if the `select` element is set to `required`. If it's not required, a blank value won't be interpreted as invalid. — GlenVaughan, Sep 08 '22 at 16:57

Alessio · Answer 2 · 2023-06-08T07:33:55.777

You can use the new :has pseudo-class.

This is a CSS only solution with a global support of 87.43% (On June 2023 Firefox still does not support the :has pseudo-class).

The code inside the snippet below will color the select in grey if the selected option has an empty value <option value="">Select</option> or <option value>Select</option> and it will color the select in black if the value of the selected option is not empty.

In any cases the options will always be black.

If you want the options to follow the select coloring, just set the default color of the option as the same one of the select:

select {
  color: grey;
}

select option {
  color: grey;
}

select {
  color: grey;
}

select option {
  color: black;
}

select:has(option:checked:not([value])),
select:has(option:checked:not([value=""])) {
  color: black;
}

select:has(option:checked:not([value])) option,
select:has(option:checked:not([value=""])) option {
  color: black;
}

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

You can read more about the :has pseudo-class on the MDN website and check the support on caniuse.com.

score 1 · Answer 3 · 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 4 · 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

user1647667 · Answer 5 · 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
14
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

How to style select dropdown only when value is empty

5 Answers5