Я хочу, чтобы вторая стрелка выбора была одинаковой с первой. Но я понятия не имею, почему они разные, потому что я не писал стрелку.
Я хочу, чтобы вторая стрелка выбора была одинаковой с первой. Но я понятия не имею, почему они разные, потому что я не писал стрелку.
Браузеры и ОС в большинстве случаев определяют стиль полей выбора, и практически невозможно изменить их только с помощью CSS. Вам нужно будет изучить методы замещения. Основной трюк - применить appearance: none
, который позволяет вам переопределить некоторые стили.
Мой любимый метод:
http://cssdeck.com/item/265/styling-select-box-with-css3
Он не заменяет элемент пользовательского интерфейса меню выбора ОС, поэтому все проблемы, связанные с выполнением этого, несуществуют (не вырваться из окна браузера с длинным списком, являющимся основным).
Удачи:)
вы можете использовать jQuery selectbox replacement. Это плагин jQuery.
http://cssglobe.com/post/8802/custom-styling-of-the-select-elements
Pure-css http://bavotasan.com/2011/style-select-box-using-only-css/
для any1, используя ie8 и не хочу использовать плагин, я сделал что-то, вдохновленное Rohit Azad и блоком Bacotasan, я просто добавил диапазон, используя JS, чтобы показать выбранное значение.
html:
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
<span>Here is the first option</span>
</div>
css (я использовал только стрелку для BG, но вы можете поместить полное изображение и отбросить позиционирование):
.styled-select div
{
display:inline-block;
border: 1px solid darkgray;
width:100px;
background:url("/Style Library/Nifgashim/Images/drop_arrrow.png") no-repeat 10px 10px;
position:relative;
}
.styled-select div select
{
height: 30px;
width: 100px;
font-size:14px;
font-family:ariel;
-moz-opacity: 0.00;
opacity: .00;
filter: alpha(opacity=00);
}
.styled-select div span
{
position: absolute;
right: 10px;
top: 6px;
z-index: -5;
}
js:
$(".styled-select select").change(function(e){
$(".styled-select span").html($(".styled-select select").val());
});
Стрелка выбора окна является родным элементом ui, это зависит от темы рабочего стола или веб-браузера. Используйте плагин jQuery (например, Select2, Chosen) или CSS.
в Firefox 39 Я обнаружил, что установка границы для элемента select будет отображать стрелку как (2). Без границы, стрелка будет отображаться как (1). Я думаю, что это ошибка.
http://jsfiddle.net/u3cybk2q/2/ проверить на windows, iOS и Android (например, исправление xplorer)
.styled-select select {
background: transparent;
width: 240px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: visible;
background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
display: none;
}
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>