Использование -webkit-вести: нет;перестать возиться с CSS

Question

Так что у apple / safari есть свои CSS для различных элементов, таких как <select> или <button> теги.

Я могу обойти это, используя -webkit-appearance:none;, но для моего <select> этоубирая небольшую стрелку выпадающего списка, которую я хочу сохранить.

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

Любая помощь или помощь с этим будет принята с благодарностью.

Answer 1

Согласно моему комментарию, использование appearance: none фактически удалит все стили, специфичные для браузера / ОС для элемента <select>.Это означает, что стрелка раскрывающегося списка также будет удалена, поскольку разные ОС также будут иметь разные стили стрелок.

Что вы можете сделать, это просто предоставить собственное фоновое изображение для стрелки.Это можно сделать, задав достаточные отступы на правой стороне элемента, а затем вставив фоновое изображение.

В приведенном ниже примере используется значок стрелки SVG из Google Material Design как часть URI данных .

select {
  -webkit-appearance: none;
  appearance: none;
  
  /* Add paddings to accommodate arrow */
  padding: 8px;
  padding-right: 30px;
  
  /* Add arrow icon */
  /* Source: https://material.io/tools/icons/?icon=keyboard_arrow_down&style=baseline */
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve"><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>');
  background-position: center right;
  background-repeat: no-repeat;
}

<select>
  <option value="Lorem" selected>Lorem</option>
  <option value="Ipsum">Ipsum</option>
  <option value="Dolor">Dolor</option>
  <option value="Sit">Sit</option>
  <option value="Amet">Amet</option>
</select>

Примечание: если вы хотите поддерживать IE, вам придется использовать кодированную разметку SVG в вашем URI данных, то есть:

background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve"><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>');