Google chrome shows a different result compared to firefox

Question

I want to edit/change a dropdown style with css specially the arrow of the dropdown. The arrow appear perfect in mozilla firefox but in google chrome it's kind of ugly (he had a bad borders). How can I get the same result in both of two brwosers (firefox and chrome) without any 1% of difference in this project and any of projects I use ?

This image shows how the button is displayed in firefox : https://ibb.co/whTPVt3 This image shows how the button is displayed in chrome: https://ibb.co/35b2Y6D

Html code :

<select class="round">
  <option>Search type</option>
  <option>Room</option>
  <option>Device</option>
  <option>Tourist</option>
</select>

CSS code :

select {

  /* styling */
  background-color: #314669;
  border: thin solid #314669;
  border-radius: 50px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  color: white;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */

select.round {
  background-image:
    linear-gradient(45deg, transparent 50%, yellow 50%),
    linear-gradient(135deg, yellow 50%, transparent 50%),
    radial-gradient(#314669 65%, transparent 72%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
}

The [how-do-i-style-a-select-dropdown-with-only-css](https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css) show how the select can be the same using a image but this request is by not using an image so to me seams **not** a duplicate. — , Oct 29 '19 at 16:01

score 0 · Answer 1 · answered Oct 29 '19 at 14:18

Inspect the element and make changes on Chrome or Firefox in developer tools, after that write css only for Firefox OR Chrome.

Target Firefox:

@-moz-document url-prefix() {
  h1 {
    color: green;
  }
}

Target Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .h1 {
        color: green;
    }
}

score -1 · Answer 2 · answered Oct 29 '19 at 14:05

-1

Its browser default behavior. If you want same result in all browser then try use Bootstrap.

answered Oct 29 '19 at 14:05

Par Tha

1,265
7
10

Google chrome shows a different result compared to firefox

2 Answers2