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

на Mac и iOS устройствах, в Safari, a <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;
}

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

4 80
css macos safari drop-down-menu background-color

4 ответа:

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

-webkit-appearance:none;

в вашем css.

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

155

используя -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>
63

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

2

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

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

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

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

-8