Как я могу удалить глянец на элементе select в Safari на Mac?

ProgramBox

Как я могу удалить глянец на элементе select в Safari на Mac?

Post author:admin
Запись опубликована:10 марта, 2023
Post category:Вопросы по программированию

#css #macos #safari #drop-down-menu #background-color

#css #macos #safari #выпадающее меню #цвет фона

Вопрос:

На устройствах Mac и iOS в Safari <select> элемент с цветом фона создает глянец над самим собой. Похоже, этого не происходит в других операционных системах.

Например, у меня есть элемент select со следующими свойствами стиля:

 select {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 10px 0 7px;
width: 250px;
background-color: #BD2786;
color: white;
letter-spacing: -.04em;
font-weight: bold;
border: 0;
}

И у моего элемента есть цвет фона, который я хочу, но глянец все еще там. Кто-нибудь знает, как сделать его ровным цветом?

Ответ №1:

Вы можете использовать это свойство CSS:

 -webkit-appearance: none;

Обратите внимание, что это также приводит к исчезновению значков со стрелками. Смотрите другие ответы о том, как добавить их обратно.

Смотрите http://trentwalton.com/2010/07/14/css-webkit-appearance /

1. нет необходимости в благодарностях, потому что есть много вещей, о которых я не знал 🙂

2. Есть ли способ сохранить стрелку с правой стороны? Я хочу переопределить только цвет. Спасибо

3. @sandeep: И сделать его кроссбраузерным: -moz-appearance: none; -webkit-appearance: none; appearance: none;

4. @Marc Если через 3 года вы все еще заинтересованы.. Я добавил решение, которое я нашел, чтобы стрелки отображались.

5. Решение для IE заключается в использовании select::-ms-expand { display: none; }, чтобы скрыть собственный значок выпадающего списка IE, а затем использовать фактическое изображение png в качестве фона для нового значка. Проблема возникает из-за того, что SVG-изображения не всегда правильно позиционируются с помощью CSS в IE.

Ответ №2:

Использование -webkit-appearance:none; также удалит стрелки, указывающие, что это выпадающий список.

Смотрите Этот фрагмент, который позволяет ему работать в разных браузерах и добавляет пользовательские стрелки без включения каких-либо файлов изображений:

 select{
    background: url(data:image/svg xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM PHRpdGxlPmFycm93czwvdGl0bGU PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8 PC9zdmc ) no-repeat 95% 50%;
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
    /* and then whatever styles you want*/
    height: 30px; 
    width: 100px;
    padding: 5px;
}

 <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Если вы хотите дополнительно задать цвет фона компонента, добавьте запятую и цвет в конце значения фона, например ... no-repeat 95% 50%, red;

1. милая, оцени исправление стрелок! вот версия с прозрачным фоном: выберите{ background: url(data:image/svg xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM PHRpdGxlPmFycm93czwvdGl0bGU PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4= ) нет-повтор 95% 50%; }

2. Если у вас широкие элементы выбора, это будет выглядеть немного не так. Чтобы исправить это, вы можете использовать смещения границ положения фона CSS3 для лучшего выравнивания фона. Поэтому замените no-repeat 95% 50% на no-repeat right 2px center

3. Те же стрелки, но белого и прозрачного цвета pastebin.com/07iS41b5

4. Люди опередили меня в настройке SVG, но я вижу, что никому здесь не удалось его минимизировать! Здесь он уменьшен, а цвет заливки стрелки теперь белый 🙂 pastebin.com/r7DDqHps

5. Я заметил, что добавленные стрелки включают в себя как стрелку вверх / вниз — любое быстрое исправление, чтобы показать обычную стрелку вниз?

Ответ №3:

Версия 2019

Более короткий URL-адрес встроенного изображения, показывает только стрелку вниз, настраиваемый цвет стрелки…

Из https://codepen.io/jonmircha/pen/PEvqPa

Автор, вероятно, Джонатан Мирча

 select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='#8C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
}

1. background-color Свойство применяется к фону элемента выбора. Чтобы изменить цвет стрелки вниз, вам нужно изменить свойство SVG fill в URL, например fill='#fc0000'

2. Лучше использовать background-position без calc: background-position: right .8em top 60%; и необходим некоторый курсор:

3. Есть ли версия с двойной стрелкой, которую кто-нибудь может продемонстрировать?

Ответ №4:

Извините, что наваливаюсь на старый элемент. Я нашел здесь частичные ответы на свои вопросы, но мне пришлось немного поработать, поэтому я хотел поделиться своими результатами для следующего пользователя.

В итоге я использовал тот же подход, что и другие участники, но с несколькими изменениями, чтобы исправить следующее

Длинный текст закрывал стрелки в других решениях
Используемое изображение представляло собой несколько старую и уродливую комбинированную стрелку вверх / вниз.

Ниже приведено рабочее решение с исправленными вышеуказанными проблемами. Примечание: я использовал белую стрелку для своего варианта использования, вам может потребоваться изменить цвет стрелки для вашего.

вот предварительный просмотр:

 select{    
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8 PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=) no-repeat 101% 50%;
  padding-right:20px;
}

1. // , Не могли бы вы объяснить, как и почему это удаляет блеск?

2. Решение в основном состоит из двух компонентов: 1. Запрос, чтобы браузер не выполнял никакого стиля / отображения для элемента. 2. Предоставьте разумный стиль. В браузерах, которые не являются ужасными (читай, не safari), стиль элемента, предоставляемый браузером, хорош. Однако в Safari стиль, предоставляемый браузером, отвратителен и ужасен. Следовательно, мы должны переопределить отображение, предоставляемое браузером, в каждом браузере. Строки, заканчивающиеся на appearance:none, выполняют часть 1 сверху. Другие строки касаются части 2. Это помогает?

Ответ №5:

Обновление 2022

Вот простое решение, которое удаляет стиль глянца Safari, устанавливая appearance:none и сохраняя стрелку раскрывающегося списка, не требуя ссылки на внешнее фоновое изображение.

Оберните выпадающий список в div и придайте ему свойства границы в форме треугольника. Обратите внимание, что это находится на after селекторе div.

HTML:

 <div class="select-dropdown">
    <select>
      <option value="Null">Favorite Fruit</option>"
      <option value="Brooklyn">Apples</option>
      <option value="Manhattan">Plums</option>
      <option value="Queens">Oranges</option>
    </select>
  </div>

CSS:

   .select-dropdown:after {
      content: " ";
      position: absolute;
      top: 50%;
      margin-top: -2px;
      right: 8px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid white;
   }

Спасибо Flash Buddy за Codepen

Ответ №6:

Проверьте -webkit-appearance: none и его производные. Первоначально описано Крисом Койером здесь: https://css-tricks.com/almanac/properties/a/appearance /

Ответ №7:

Как упоминалось здесь несколько раз

 -webkit-appearance:none;

также удаляет стрелки, что в большинстве случаев не то, что вам нужно.

Простое решение, которое я нашел, — просто использовать select2 вместо select . Вы также можете изменить стиль элемента select2, и, что наиболее важно, select2 выглядит одинаково на Windows, Android, iOS и Mac.

Ответ №8:

я использовал это и решил мою

-webkit-внешний вид: отсутствует;

Ответ №9:

Если вы проверите таблицу стилей агента пользователя Chome, вы найдете это

 outline: -webkit-focus-ring-color auto 5px;

короче говоря, его свойство outline — сделайте его None

это должно убрать свечение