Вот три решения:
Решение № 1 - внешний вид: нет - с обходом Internet Explorer 10 - 11 ( демонстрация )
-
Чтобы скрыть стрелку по умолчанию, установленную appearance: noneдля элемента select, затем добавьте собственную стрелку сbackground-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Поддержка браузера:
appearance: noneимеет очень хорошую поддержку браузера ( caniuse ) - за исключением Internet Explorer 11 (и более поздних ) и Firefox 34 (и более поздних ).
Мы можем улучшить эту технику и добавить поддержку Internet Explorer 10 и Internet Explorer 11, добавив
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Если Internet Explorer 9 вызывает озабоченность, у нас нет способа удалить стрелку по умолчанию (что означало бы, что теперь у нас будет две стрелки), но мы могли бы использовать классный селектор Internet Explorer 9.
Как минимум, чтобы отменить нашу пользовательскую стрелку - оставив стрелку выбора по умолчанию без изменений.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Все вместе:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
Это решение простое и имеет хорошую поддержку браузера - его должно быть достаточно.
Если необходима поддержка браузером Internet Explorer 9 (и более поздних версий) и Firefox 34 (и более поздних версий), продолжайте читать ...
Решение № 2 Обрезать элемент select, чтобы скрыть стрелку по умолчанию ( демонстрация )
-
(Подробнее читайте здесь)
Оберните selectэлемент в div с фиксированной шириной иoverflow:hidden .
Затем дайте selectэлементу ширину около 20 пикселей больше, чем div .
В результате стрелка раскрывающегося списка selectэлемента по умолчанию будет скрыта (из-заoverflow:hidden на контейнере), и вы можете поместить любое фоновое изображение, которое вы хотите, справа от div.
Преимущество этого подхода состоит в том, что он является кросс-браузер (Internet Explorer 8 , а затем, WebKit и Gecko ). Однако недостатком этого подхода является то, что выпадающий список опций выступает справа (на 20 пикселей, которые мы спрятали ... потому что элементы опций принимают ширину элемента select).
[Следует, однако, отметить, что если пользовательский элемент выбора необходим только для мобильных устройств - тогда вышеупомянутая проблема не применяется - из-за способа, которым каждый телефон изначально открывает элемент выбора. Так что для мобильных устройств это может быть лучшим решением.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
Если пользовательская стрелка необходима в Firefox - до версии 35 - но вам не нужно поддерживать старые версии Internet Explorer - тогда продолжайте читать ...
Решение № 3 - Использование pointer-eventsсобственности ( демо )
-
(Подробнее читайте здесь)
Идея здесь состоит в том, чтобы наложить элемент на собственную стрелку раскрывающегося списка (чтобы создать нашу собственную) и затем запретить события указателя на нем.
Преимущество: хорошо работает в WebKit и Gecko. Это выглядит хорошо (без выступающих optionэлементов).
Недостаток: Internet Explorer (Internet Explorer 10 и ниже) не поддерживаетpointer-events , что означает, что вы не можете щелкнуть пользовательскую стрелку. Кроме того, еще один (очевидный) недостаток этого метода заключается в том, что вы не можете нацеливать на новое изображение стрелки эффект наведения или курсор в виде руки, потому что мы просто отключили события указателя на них!
Тем не менее, с помощью этого метода вы можете использовать Modernizer или условные комментарии, чтобы Internet Explorer вернулся к стандартному встроенному стрелке.
NB. Поскольку Internet Explorer 10 больше не поддерживает conditional comments: если вы хотите использовать этот подход, вам, вероятно, следует использовать Modernizr . Однако все еще возможно исключить CSS-события указателя из Internet Explorer 10 с помощью хака CSS, описанного здесь .
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->