Ось три рішення:
Рішення №1 - зовнішній вигляд: немає - із вирішенням Internet Explorer 10 - 11 ( демонстрація )
-
Щоб приховати стрілку за замовчуванням, встановлену appearance: noneна елементі вибору, а потім додайте власну спеціальну стрілку за допомогоюbackground-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Підтримка браузера:
appearance: noneмає дуже гарну підтримку браузера ( канюза ) - за винятком 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елемент у діву з фіксованою шириною та overflow:hidden.
Потім надайте selectелементу ширину приблизно на 20 пікселів, ніж div .
Результат полягає в тому, що стрілка випадаючого selectелемента за замовчуванням буде прихована (завдяки overflow:hiddenконтейнеру), і ви можете розмістити будь-яке фонове зображення, яке ви хочете, на правій частині розділу.
Перевага цього підходу полягає в тому, що він є крос-браузер (Internet Explorer 8 , а потім, WebKit і Gecko ). Однак недоліком такого підходу є те, що випадаючі параметри вискакують з правого боку (на 20 пікселів, які ми приховали ..., оскільки елементи опції приймають ширину елемента вибору).
[Однак слід зазначити, що якщо користувацький елемент вибору необхідний лише для мобільних пристроїв, то зазначена вище проблема не застосовується - через те, як кожен телефон власним чином відкриває елемент вибору. Тож для мобільних пристроїв це може бути найкращим рішенням.]
.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, а це означає, що ви не можете натиснути спеціальну стрілку. Крім того, ще одним (очевидним) недоліком цього методу є те, що ви не можете орієнтуватися на ваше нове зображення стрілки за допомогою ефекту наведення курсору чи курсору руки, тому що ми лише відключили події вказівника на них!
Однак за допомогою цього методу ви можете використовувати Модернізатор або умовні коментарі, щоб змусити 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]-->