Resemble the style of a select in different browsers

Question

Resemble the style of a select in different browsers

Navigation

#1 by (1 votes)

1

I have a select which has some established styles. The problem is that I visualize it differently in Chrome and in Firefox and I would like to have a style 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:

While in Firefox there is another:

With what styles can I assimilate them in different browsers?

css3

asked by Hoose 24.05.2018 в 23:55

source

1 answer

Plugin for wordpress Problem when creating project Application / Qt Widgets Application

score 1 · Accepted Answer

The selects tend to change its appearance from browser to browser a lot.

Depending on your browser support needs you can use appearance which is supported by the most browsers to exception of IE9 (for a change) with their respective vendor prefix .

It's the only way I've managed to make everyone look uniform in different browsers (except in the one that should not be named) using only 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>