There is a select list that lies on a white background and you need to remove the boundaries from it. If I set the border: none; then everything is fine in chrome, and in Mozilla, opera and eje, a gray background with a border appears on the arrow - how to get rid of it?

 div { height: 44px; line-height: 3; } select { border: none; } 
 <div> <select aria-invalid="false"> <option value="Выбор">Выбор</option> <option value="1-ая">1-ая</option> <option value="2-ая">2-ая</option> </select> </div>

  • one
    IMHO, just draw your drop list or use a ready-made solution (for example from bootstrap) - tutankhamun
  • @tutankhamun is it possible in more detail about the ready-made solution from bootstrap ? I would just like to remove the gray background - Vasya
  • I meant something like this: bootply.com/b4NKREUPkN It remains to stylize the theme of the bootstrap or selectively override the styles - tutankhamun
  • @tutankhamun aa, I understood - you mean select to replace with ul it, this is the way for me in this case will not work, since select is an element of the plug-in of sending a form to wordpress - Vasya
  • one
    A little js and hidden-field will solve the problem, but this is a personal matter. I have long since abandoned attempts to stylize select fields well and cross-browser. Either I leave it "as is", or I substitute for custom drop lists. - tutankhamun

1 answer 1

You need to remove the standard appearance and (preferably) user-select .

 -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: radio-container; appearance: none;
  • how to remove - just like that? jsfiddle.net/DTcHh/27625 I still don’t really understand something. I would just remove the background - Vasya
  • An interesting decision. Only from CSS3 this property has already been removed , but IE did not even have time to release a glitch to it - tutankhamun
  • @ Vasya, with the help of these properties you remove the standard design, and then stylize this select as you need. - Sasha Omelchenko
  • The @tutankhamun question was about specific browsers - Mozilla, Opera and Edge, there you can operate this property, despite the specification. caniuse.com/#search=appearance - Sasha Omelchenko
  • 2
    @SashaOmelchenko Do not think that I dispute your decision, just indicated for information. Removed from the specification, it means they can change the behavior of the parameter. This will need to be taken into account. And I even pushed the answer. - tutankhamun