CODEWITHSUNDEEP
htmlcss
Nastyo
Nastyo

Reputation: 199

Select option disabled and selected - only CSS

I'm facing to a some trouble with a select option disabled but auto selected.

I want to show a default value into the select when at the page is loadded so I use this code:

<select>
  <option disabled selected>Select your item</option>
  <option>item</option>
  <option>item</option>
</select>

But when the user open the select list, I would like to hide the option or stylized the option but I don't know how to get it in my CSS. Or if I try to hide the option it doesn't work in IE (min ie11).

I tried to get it with 

select option[disabled]:selected
select option[disabled]:focus 
etc

but no result for the moment, the disabled selected option still have the default behavior, I can see my change only when I hover other items.

Idee?

Upvotes: 1

Views: 9110

Answers (4)

Eisen
Eisen

Reputation: 167

I know that question is a bit old but I come over this when I tried something similar today. If you want to apply different styles to the pre-selected option and the actual options and also not want to show the pre-selection in the dropdown try this:

select:invalid {
  color: #BDBDBD;
}     
select option {
  color: #4c4643;
}
<select required="">
  <option value="" disabled="" selected="" hidden="">Select please</option>
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
</select>

Upvotes: 1

Debabrata Patra
Debabrata Patra

Reputation: 548

If you want to customize options on focus. Try this.

select:focus option{
    background-color: red;
}

Upvotes: 0

Bram Vanroy
Bram Vanroy

Reputation: 28534

Counter-intuitively, this seems to work in Chrome.

<select>
  <option disabled selected hidden>Select your item</option>
  <option>item</option>
  <option>item</option>
</select>

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

try this if look like your requirement

<select>
  <option hidden>Select your item</option>
  <option>item</option>
  <option>item</option>
</select>

Upvotes: 1

Related Questions