CODEWITHSUNDEEP
htmlcss
Marc Roussel
Marc Roussel

Reputation: 499

Hide / Show select arrow

Despite my search I just found related subject about removing or hiding the arrow but not showing it on hover.

The goal is to hide the HTML Select Arrow for all latest major browser, Edge, Chrome and IE 11 but showing it when mouse hover.

Right now I've been able to make it work in IE 11 perfectly with the following code however it's not working fine in Chrome and Edge. Any insight on what to change or add in this code to make it cross browser ?

select::-ms-expand {
  display: none;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

select:hover {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}
select:hover::-ms-expand {
  display: block;
}
<select>
    <option>Marc Roussel</option>
    <option>Gilles Lavoie</option>
    <option>Roger Maheu</option>
</select>

Upvotes: 5

Views: 9473

Answers (1)

Xenos
Xenos

Reputation: 3507

Use -webkit-appearance: menulist. or appearance: none for modern browsers:

See http://trentwalton.com/2010/07/14/css-webkit-appearance/ for the whole list.

[IMO, from a user point of view, it's a strange requirement to turn something standard and "normal" to something specific and surprising]

Upvotes: 6

Related Questions