Я пытаюсь заменить стрелку выбора собственным изображением. Я включаю выбор в div с тем же размером, я устанавливаю фон выбора как прозрачный, и я включаю изображение (с тем же размером, что и стрелка) в правом верхнем углу div в качестве фона.
Работает только в Chrome.
Как я могу заставить его работать в Firefox и IE9, где я получаю следующее:
.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(images/downarrow_blue.png) no-repeat right white;
border: 2px double red;
display: inline-block;
position: relative;
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}
body {
background-color: #333333;
color: #FFFFFF;
}
.block label {
color: white;
}<HTML>
<HEAD>
</HEAD>
<BODY>
<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">
<fieldset class="block" id="searchBlock">
<p>
<label style="width:80px">Class</label>
<div class="styled-select">
<select property="voucherCategoryClass">
<option value="0">Select </option>
<option value="7382">steam </option>
</select>
</div>
</p>
</fieldset>
</form>
</BODY>
</HTML>
appearance: menulist !important;-moz-appearance: menulist !important;-webkit-appearance: menulist !important;-o-appearance: menulist !important;Я установил
selectпользовательскую стрелку, похожую на ответ Хулио, однако у нее нет заданной ширины и используетсяsvgв качестве фонового изображения. (arrow_drop_downиз иконок material-ui)Если вам нужно, чтобы он также работал в IE, обновите стрелку svg до base64 и добавьте следующее:
Чтобы упростить размер и интервал стрелки, используйте этот svg:
У него нет промежутков по сторонам стрелки.
источник
background-position: top 5px right 4px;background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% no-repeat transparent;background-position-y: 5px;вместо% (напримерbackground-position-y: 50%;)?Работа всего с одним классом:
http://jsfiddle.net/qhCsJ/4120/
источник
background-position-x: calc( 100% - 5px );Вот элегантное исправление, в котором для отображения значения используется диапазон.
Макет такой:
JsFiddle
источник
Это будет хорошо работать, особенно для тех, кто использует Bootstrap, протестированный в последних версиях браузера:
источник
Отметьте этот. Это просто так:
-prefix-appearanceчтобыnoneудалить стилиtext-indentчтобы "сдвинуть" контент немного вправоtext-overflowпустую строку. Все, что выходит за пределы его ширины, станет ... ничем! И это включает стрелку.Теперь вы можете стилизовать его как хотите :)
Посмотреть на JSFiddle
источник
Работает во всех браузерах:
источник
Стилизуйте метку с помощью CSS и используйте события указателя:
и относительный CSS
Я просто использовал здесь стрелку вниз, но вы можете установить блок с фоновым изображением. Вот пример уродливой скрипки: https://jsfiddle.net/1rofzz89/
источник
Я сослался на этот пост , он работал как шарм, за исключением того, что не скрывал стрелку в браузере IE.
источник
Предположим, selectDrop - это класс, присутствующий в вашем HTML-теге. Таким образом, этой части кода достаточно, чтобы изменить значок стрелки по умолчанию:
источник