CSS для "стрелки вниз" в элементе <select>?
Можно ли стилизовать стрелку вниз в раскрывающемся элементе выбора? то есть (<select><option>--></option></select>)
Я подозреваю, что ответ отрицательный, потому что IE обрабатывает этот конкретный элемент. Если способа нет, знает ли кто-нибудь о «поддельном» раскрывающемся списке с использованием javaScript, который имитировал бы это поведение, но давал мне возможность настраивать?
Ответы 11
Может быть, вы можете использовать Замена окна выбора jQuery. Это плагин jQuery.
Если css отключен, ваши пользователи заслуживают того, что они получают.
Выпадающий список является элементом уровня платформы, вы не можете применить к нему CSS.
Вы можете наложить изображение поверх него с помощью CSS и вызвать событие щелчка в элементе ниже.
Я не знаю, можно ли его стилизовать с помощью CSS (возможно, не в IE), но, пожалуйста: не используйте «поддельный» раскрывающийся список с использованием javascript, потому что удобство использования этих вещей обычно ужасно. Кроме всего прочего, обычно отсутствует клавиатурная навигация.
Нет, стрелка вниз - это элемент браузера. Он встроен [и отличается] в каждом браузере. Однако вы можете заменить поле выбора настраиваемым раскрывающимся списком с помощью javascript.
Ян Ханчич упомянул плагин jQuery для этого.
Вам нужно будет создать свой собственный раскрывающийся список, используя скрытые div и скрытый элемент ввода, чтобы записать, какой вариант был «выбран». Я предполагаю, что опубликованная им ссылка @Jan Hancic - это, вероятно, то, что вы ищете.
Вы не можете хорошо стилизовать комбо с помощью CSS.
Ребята из FogBugz сделали довольно хорошую кастомную комбинацию с использованием JavaScript, так что это возможно, просто требуется много работы, чтобы сделать это правильно.
Лучше придерживаться стандартного для версии 1, а затем посмотреть, стоит ли обновлять его, когда ваше приложение появится в свободном доступе.
Попробуй это
<div style='position:relative;left:0px;top:0px;
onMouseOver=document.getElementById('visible').style.visibility='visible'
id='hidden'>10
<select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
onMouseOut=document.getElementById('visible').style.visibility='hidden'
onChange='this.form.submit()'
id='visible' multiple size='3'>";
<option selected value=10>10</option>
<option value=20>20</option>
<option value=50>50</option>
</select>
</div>
Это изменит входы, выберите и т. д. На серый стиль старого стиля, не уверен, что вы сможете манипулировать после этого:
В <head> положить:
<meta http-equiv = "MSThemeCompatible" content = "NO">
Здесь есть отличное решение для стилизации выпадающих списков только на CSS: http://bavotasan.com/2011/style-select-box-using-only-css/
По сути, оберните выделение в контейнер div, сделайте выделение на 18 пикселей шире контейнера с прозрачным фоном, дайте контейнеру overflow: hidden (чтобы отрубить стрелку, созданную браузером), и добавьте фоновое изображение со стилизованным стрелка к контейнеру.
Не работает в IE7 (или 6), но серьезно, я говорю, что если вы используете IE7, вы заслуживаете менее красивого раскрывающегося списка.
Я использовал это для рендеринга тега select для мобильного сайта ... Я не использовал javascript, чтобы сохранить всплывающее диалоговое окно поведения ОС по умолчанию ... рендеринг okey [iphone; android 3/4] dev все еще выполняется
Вы можете добиться этого с помощью только CSS и вашей стрелки вниз в виде изображения, позиционируемого как абсолютное с помощью "pointer-events: none;" см. мой пример ниже:
<select>
<option value = "1">1 Person</option>
<option value = "2">2 People</option>
</select>
<img class = "passthrough" src = "downarrow.png" />
.passthrough {
pointer-events: none;
position: absolute;
right: 0;
}
Проверка http://jsfiddle.net/u3cybk2q/2/ на windows, iOS и Android (патч iexplorer)
.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; /*patch iexplorer*/
} <div class = "styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
Идеально работает для меня :) Я думаю, что для этого нет лучшего решения, из-за множества проблем с взломом IE и CSS ... Единственное, чего мне здесь не хватает, - это вернуться к какому-то css, если JS отключен в браузере.