Как убрать блеск выбранного элемента в Safari на Mac?

114

На компьютерах Mac и iOS в Safari <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;
}

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

css macos safari drop-down-menu background-color Ян Хантер
источник

Ответы:

196

@beanland; Ты должен написать

-webkit-appearance:none;

в вашем css.

прочтите это http://trentwalton.com/2010/07/14/css-webkit-appearance/

Sandeep
источник
4
не нужно благодарить, потому что есть много вещей, о которых я не знал :)
sandeep
123
Есть ли способ сохранить стрелку с правой стороны? Я хочу переопределить только цвет. Спасибо
Марк
19
@sandeep: И чтобы сделать его кроссбраузерным:-moz-appearance: none; -webkit-appearance: none; appearance: none;
Дориан
6
@Marc Если через 3 года вам все еще интересно ... Я добавил найденное мной решение, чтобы стрелки отображались.
alicjasalamon
2
Решение для IE - использовать select :: - ms-expand {display: none; }, чтобы скрыть собственный значок раскрывающегося окна выбора IE, затем используйте фактическое изображение PNG в качестве фона для нового значка. Проблема возникает из-за того, что изображения SVG не всегда правильно позиционируются через CSS в IE.
Филлис Сазерленд
107

Использование -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>
Развернуть фрагмент

аликхасаламон
источник
16
милая, ценю исправление стрелок! не вот версия с прозрачным фоном: выбрать {фон: URL (данные: изображения / SVG + XML; base64, PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + PHRpdGxlPmFycm93czwvdGl0bGU + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =) нет повтора 95% 50%; }
Инго Реннер,
1
сделал прозрачную стрелку (не смог вставить сюда из-за длины): pastebin.com/HQ0x4Rka
mga
5
Если у вас есть широкие выделенные элементы, это будет выглядеть немного не так. Чтобы исправить это, вы можете использовать смещение края положения фона CSS3, чтобы лучше выровнять фон. Замените no-repeat 95% 50%наno-repeat right 2px center
iSWORD
3
Те же стрелки, но белые и прозрачные pastebin.com/07iS41b5
Андреас Гассманн
2
Я заметил, что добавленные стрелки включают в себя стрелку вверх / вниз - какое быстрое исправление, чтобы показать обычную стрелку вниз?
Brett
14

Версия 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='%238C98F2'><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 в URL-адресе, напримерfill='%23fc0000'
Ноэль Абрахамс
1
Лучше использовать background-position без calc: background-position: right .8em top 60%; и какой-то курсор: нужен
Игги
Есть ли вариант с двойной стрелкой, который кто-то может продемонстрировать?
evolross
3

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

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

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

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

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

выберите с белой стрелкой

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
Решение в основном состоит из двух компонентов: 1. Запрашивать, чтобы браузер не использовал стиль / отображение элемента. 2. Обеспечьте разумный стиль. В браузерах, которые не являются ужасными (читай, а не сафари), стиль элементов, предоставляемый браузером, хорош. Однако в сафари стиль, предоставляемый браузером, отвратителен и ужасен. Следовательно, мы должны переопределить отображение браузера в каждом браузере. Строки заканчиваются по внешнему виду: ни одна из них не повторяет часть 1 сверху. Остальные строчки касаются части 2. Это помогает?
Джастин Эдвардс
0

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

-webkit-appearance:none;

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

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

CharlesT
источник
-8

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

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

короче его свойство контура - сделать его None

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

Сураджнайкин
источник
8
Он спрашивает не о контуре, а о глянцевом фоне.
Apollo