Google Chrome показывает другой результат по сравнению с Firefox - PullRequest
Новая
       1

Google Chrome показывает другой результат по сравнению с Firefox

0 голосов
/ 29 октября 2019

Я хочу отредактировать / изменить стиль выпадающего меню css, особенно стрелку выпадающего списка. Стрелка выглядит идеально в Mozilla Firefox, но в Google Chrome она выглядит некрасиво (у него были плохие границы). Как я могу получить один и тот же результат в обоих двух brwosers (Firefox и Chrome) без разницы в 1% в этом проекте и любом из проектов, которые я использую?

Это изображение показывает, как кнопка отображается в Firefox:https://ibb.co/whTPVt3 Это изображение показывает, как кнопка отображается в хром: https://ibb.co/35b2Y6D

HTML-код: 

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

CSS-код: 

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;
}

Ответы [ 2 ]

0 голосов
/ 29 октября 2019

Проверьте элемент и внесите изменения в Chrome или Firefox в инструментах разработчика, после этого напишите css только для Firefox ИЛИ 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;
    }
}
0 голосов
/ 29 октября 2019

Его поведение браузера по умолчанию. Если вы хотите получить одинаковый результат во всех браузерах, попробуйте использовать Bootstrap.

...