Данный код полностью работает для всех браузеров, кроме Safari. Идея в том, чтобы вывести options в select-e горизонтально с отступами между друг другом.
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important; - не помогают
Как исправить это для safari?
Спасибо.
select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
display: table-row !important;
margin: 0 auto !important;
font-size: 24px !important;
overflow: hidden !important;
border: none;
user-select: none;
/* supported by Chrome and Opera */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
}
select:focus {
border: none;
outline: none;
}
select option:focus {
border: none;
outline: none;
}
option {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
padding: 100px 100px 10px 100px;
display: inline-block !important;
background: #fff url('http://via.placeholder.com/350x150') no-repeat center bottom 40px;
background-position-y: -40px;
background-clip: border-box;
background-size: cover;
}
<select size="4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>