<select>
    <option value="">- Placeholder</option>
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
</select>

I would like to change the color of an unselected dropdown (that shows the placeholder value by default) to a light grey. So that it appears more like a placeholder field like for inputs.

Especially, as soon as a real value is selected, the text shown should not be back to normal.

https://jsfiddle.net/bq32uxh7/

CodePudding user response：

To make sure your placeholder value cannot be selected, you can set it as disabled. In most browsers it will be shown as light grey when it is not selected and thus not selectable.

<select>
    <option value="" selected disabled>- Placeholder</option>
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
</select>

If you don't want the placeholder to appear at all in the options list, you can even hide it with the hidden attribute:

<option value="" selected disabled hidden>- Placeholder</option>

If you want to style it further, refer to @Rippo 's answer.

EDIT: If you want to change how the select input looks like when the selected option is not valid (i.e. is the placeholder), you need to set the select input as required then you can use the :invalid pseudo-class on the select's css selector.

select:invalid {
  background-color: gray;
}

<select required>
    <option value="" selected disabled>- Placeholder</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

CodePudding user response：

Does this get you close?

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById('form-select').addEventListener('change', function() {
    if (this.value === "") {
         if (!this.classList.contains('placeholder')) {
            this.classList.add('placeholder');
       }
         if (this.classList.contains('others')) {
            this.classList.remove('others');
       }
    } else {
         if (!this.classList.contains('others')) {
            this.classList.add('others');
       }
         if (this.classList.contains('placeholder')) {
            this.classList.remove('placeholder');
       }
    }
    });
});

#form-select {
  color: #8e8e8e;
}
#form-select.placeholder, option.placeholder {
  color: #8e8e8e;
}
#form-select.others, option.others {
    color:#000;
}

<select id="form-select" aria-label="Default select example">
  <option  value="" selected>- Placeholder</option>
  <option  value="1">One</option>
  <option  value="2">Two</option>
  <option  value="3">Three</option>
</select>
  

A couple things I have changed.

1. The select option now has an id
2. Every option has a class
3. When you have a other item selected in dark mode things look a bit weird as the grey is forcing the background color to go into light mode. This may be possible to adjust with forcing a bg color. In light mode it works well
4. You should be able to refactor the add/removing classes and create a toggle function instead