Home / Questions / 167575
Accepted
Hoose
Asked: 2020-05-25 13:55:39 +0800 CST 2020-05-25 13:55:39 +0800 CST

Matching the style of a select in different browsers

  • 772

I have one selectwhich has some established styles. The problem is that I see it differently in Chrome and in Firefox and I would like to have a style that is at least similar or similar.

The code I use is:

#seleccionar{
  background-color:transparent;
  color:#259af0;
  text-transform: none;
  border:none;
}

#seleccionar:focus{
  outline:none;
}
<select id="seleccionar">
  <option>Prueba 1</option>
  <option>Prueba 2</option>
</select>

In Chrome it looks like this:

enter image description here

While in Firefox there is another:

enter image description here

With what styles can I assimilate them in different browsers?

css3

1 Answers

  1. Best Answer

    They selectstend to change their appearance a lot from browser to browser.

    Depending on your browser support needs you can use appearancewhat is supported by most browsers except IE9 (for a change) with their respective vendor prefix .

    It's the only way I've managed to make them all look uniform in different browsers (except the one that shouldn't be named) using just css

    select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Caret_down_font_awesome.svg/1024px-Caret_down_font_awesome.svg.png") no-repeat 100% center;
  padding: 0 15px;
  background-size: 15px 15px;
}

#seleccionar {
  background-color: transparent;
  color: #259af0;
  text-transform: none;
  border: none;
}

#seleccionar:focus {
  outline: none;
}
    <select id="seleccionar">
  <option>Prueba 1</option>
  <option>Prueba 2</option>
</select>

    • 1