Насколько я знаю, это невозможно в IE, потому что он использует компонент ОС.
Вот ссылка , где заменяется элемент управления, но я не знаю, хотите ли вы этого.
Редактировать: ссылка не работает Я сбрасываю содержимое
<select> Нечто новое, часть 1
Аарон Густафсон
Итак, вы создали красивый, соответствующий стандартам сайт, использующий новейшие и
лучшие методы CSS. Вы освоили контроль стиля каждого элемента, но
в глубине души тихий голос не дает понять, насколько уродливы ваши
<select> с. Что ж, сегодня мы собираемся найти способ заставить замолчать
маленький голос и действительно завершить наши проекты. С небольшим количеством сценариев DOM и
немного креативного CSS, вы тоже можете сделать свои <select> красивыми ... и вы не будете
приходится жертвовать доступностью, удобством использования или постепенной деградацией.
Проблема
Мы все знаем, что <select> просто безобразно. На самом деле многие пытаются ограничить его
использовать, чтобы избежать его классической паутины около 1994 врезных границ. Мы не должны избегать
используя <select>, хотя - это важная часть текущей формы
набор инструментов; мы должны принять это. Тем не менее, некоторое творческое мышление может улучшить
это.
<select>
Мы будем использовать простое для нашего примера:
<select id="something" name="something">
<option value="1">This is option 1</option>
<option value="2">This is option 2</option>
<option value="3">This is option 3</option>
<option value="4">This is option 4</option>
<option value="5">This is option 5</option>
</select>
[Примечание: подразумевается, что это <select> находится в контексте полного
форма.]
Итак, у нас есть пять <option> с в <select>. Это <select> имеет
однозначно присваивается id от «чего-то». В зависимости от браузера / платформы
вы просматриваете его, ваш <select> скорее всего выглядит примерно так:
as rendered in Windows XP/Firefox 1.0.2.">
(источник: easy-designs.net )
или это
as rendered in Mac OSX/Safari 1.2.">
(источник: easy-designs.net )
Допустим, мы хотим, чтобы он выглядел немного более современным, возможно, так:
.">
(источник: easy-designs.net )
Так как нам это сделать? Сохранение базового <select> не вариант. Помимо
базовый цвет фона, шрифт и настройки цвета, у вас нет
много контроля над.
Однако мы можем имитировать превосходную функциональность <select> в новой форме.
контроль без ущерба для семантики, удобства использования или доступности. Чтобы
Для этого нам нужно изучить природу <select>.
A <select> - это, по сути, неупорядоченный список вариантов, в которых вы можете
выберите одно значение для отправки вместе с остальной частью формы. Итак, по сути,
это <ul> на стероидах. Продолжая эту линию мышления, мы можем
замените <select> неупорядоченным списком, если мы дадим ему
расширенная функциональность. Как <ul> s может быть стилизовано в множество различных
кстати, мы почти дома свободны. Теперь возникает вопрос "как обеспечить, чтобы мы
сохранить функциональность <select> при использовании <ul>? "
слова, как мы представляем правильное значение вместе с формой, если мы
больше не используете элемент управления формы?
Решение
Введите DOM. Последний шаг в этом процессе делает <ul>
функционировать / чувствовать себя как <select>, и мы можем сделать это с
JavaScript / ECMA Script и немного умный CSS. Вот основной список
Требования, которые мы должны иметь faux <select>:
- щелкните по списку, чтобы открыть его,
- нажмите на элементы списка, чтобы изменить назначенное значение и закрыть список,
- показывает значение по умолчанию, когда ничего не выбрано, и
- показать выбранный элемент списка, когда что-то выбрано.
С этим планом мы можем начать заниматься каждой частью подряд.
Создание списка
Итак, сначала нам нужно собрать все атрибуты и
и восстановить его как. Мы достигаем этого, запустив следующее
JS:
function selectReplacement(obj) {
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
// collect our object's options
var opts = obj.options;
// iterate through them, creating <li>s
for (var i=0; i<opts.length; i++) {
var li = document.createElement('li');
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
ul.appendChild(li);
}
// add the ul to the form
obj.parentNode.appendChild(ul);
}
Возможно, вы думаете: «Что теперь произойдет, если есть выбранный <option>
альготовы? "Мы можем объяснить это, добавив еще один цикл, прежде чем мы создадим
<li> s, чтобы найти выбранное <option>, а затем сохранить это значение в
для class нашего выбранного <li> как «выбранного»:
…
var opts = obj.options;
// check for the selected option (default to the first option)
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break; // we found the selected option, leave the loop
} else {
selectedOpt = 0;
}
}
for (var i=0; i<opts.length; i++) {
var li = document.createElement('li');
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
if (i == selectedOpt) {
li.className = 'selected';
}
ul.appendChild(li);
…
[Примечание: с этого момента, вариант 5 будет выбран, чтобы продемонстрировать это
функциональность.]
Теперь мы можем запустить эту функцию на каждом <select> на странице (в нашем случае,
один) со следующим:
function setForm() {
var s = document.getElementsByTagName('select');
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
window.onload = function() {
setForm();
}
Мы почти на месте; давайте добавим немного стиля.
Умный CSS
Я не знаю как вы, но я большой поклонник выпадающих списков CSS (особенно
Suckerfish сорт). Я был
работать с ними в течение некоторого времени, и, наконец, до меня дошло, что
<select> очень похоже на выпадающее меню, хотя и с небольшим
происходит под капотом. Почему бы не применить ту же стилистическую теорию к нашему
faux- <select>? Основной стиль выглядит примерно так:
ul.selectReplacement {
margin: 0;
padding: 0;
height: 1.65em;
width: 300px;
}
ul.selectReplacement li {
background: #cf5a5a;
color: #fff;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.7em;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 276px;
}
ul.selectOpen li {
display: block;
}
ul.selectOpen li:hover {
background: #9e0000;
color: #fff;
}
Теперь, чтобы обработать «выбранный» элемент списка, нам нужно немного хитрее:
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
color: #fff;
display: block;
}
ul.selectOpen li.selected {
background: #9e0000;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.selected:hover {
background: #9e0000;
color: #fff;
}
Обратите внимание, что мы не используем псевдокласс: hover для <ul>, чтобы сделать его
открыть, вместо этого мы class -ing это как "selectOpen". Причиной этого является
два раза:
- CSS для презентации, а не для поведения; и
- мы хотим, чтобы наш faux-
<select> вел себя как настоящий <select>, нам нужно, чтобы список открывался в событии onclick, а не при наведении мыши.
Чтобы реализовать это, мы можем взять то, что мы узнали от Suckerfish, и применить его к
наш собственный JavaScript, динамически назначая и удаляя этот class в
События `` onclick events for the list items. To do this right, we will need the
ability to change the onclick` для каждого элемента списка на лету для переключения
между следующими двумя действиями:
- показывать полный поддельный -
<select> при нажатии на выбранную / стандартную опцию, когда список свернут; и
- "выбрать" элемент списка при нажатии и свернуть искусственный -
<select>.
Мы создадим функцию с именем selectMe() для обработки переназначения
«выбранный» class, переназначение событий onclick для списка
предметы, а рухнувшие искусственные - <select>:
Как научил нас оригинальный Suckerfish, IE не будет распознавать состояние наведения на
что-нибудь кроме <a>, поэтому мы должны учитывать это, увеличивая
часть нашего кода с тем, что мы узнали от них. Мы можем прикрепить
События onmouseout для "selectReplacement" class -ed <ul> и его
<li> s
function selectReplacement(obj) {
…
// create list for styling
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
if (window.attachEvent) {
ul.onmouseover = function() {
ul.className += ' selHover';
}
ul.onmouseout = function() {
ul.className =
ul.className.replace(new RegExp(" selHover\\b"), '');
}
}
…
for (var i=0; i<opts.length; i++) {
…
if (i == selectedOpt) {
li.className = 'selected';
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ' selHover';
}
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(" selHover\\b"), '');
}
}
ul.appendChild(li);
}
Затем мы можем изменить несколько селекторов в CSS, чтобы справиться с наведением на IE:
ul.selectReplacement:hover li,
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
color: #fff;
display: block;
}
ul.selectReplacement:hover li.selected**,
ul.selectOpen li.selected** {
background: #9e0000;
display: block;
}
ul.selectReplacement li:hover,
ul.selectReplacement li.selectOpen,
ul.selectReplacement li.selected:hover {
background: #9e0000;
color: #fff;
cursor: pointer;
}
Теперь у нас есть список, ведущий себя как <select>; но мы все еще
необходимо изменить выбранный элемент списка и обновить значение
связанный элемент формы.
JavaScript fu
У нас уже есть «выбранный» class, который мы можем применить к нашему выбранному элементу списка,
но нам нужен способ применить его к <li> при нажатии на
и удалив его из любого из ранее выбранных им братьев и сестер. Вот JS
чтобы сделать это:
function selectMe(obj) {
// get the <li>'s siblings
var lis = obj.parentNode.getElementsByTagName('li');
// loop through
for (var i=0; i<lis.length; i++) {
// not the selected <li>, remove selected class
if (lis[i] != obj) {
lis[i].className='';
} else { // our selected <li>, add selected class
lis[i].className='selected';
}
}
}
[Примечание: мы можем использовать простое className присваивание и освобождение, потому что мы в
полный контроль над <li> с. Если вам (по какой-то причине) необходимо назначить
дополнительные классы для ваших элементов списка, я рекомендую изменить код
добавьте и удалите «выбранный» класс в свойстве className.]
Наконец, мы добавляем небольшую функцию для установки значения оригинала <select>
(который будет отправлен вместе с формой) при нажатии <li>:
function setVal(objID, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
}
Затем мы можем добавить эти функции к событию onclick наших <li> s:
…
for (var i=0; i<opts.length; i++) {
var li = document.createElement('li');
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = opts[i].index;
li.selectID = obj.id;
li.onclick = function() {
setVal(this.selectID, this.selIndex);
selectMe(this);
}
if (i == selectedOpt) {
li.className = 'selected';
}
ul.appendChild(li);
}
…
Вот, пожалуйста. Мы создали наш функционал faux- . As we have
not hidden the originalyet, we can [watch how it
behaves](files/4.html) as we choose different options from our
faux-. Of course, in the final version, we don't want the original
to show, so we can hide it by, классифицируя его как «замененный», добавив
что к JS здесь:
function selectReplacement(obj) {
// append a class to the select
obj.className += ' replaced';
// create list for styling
var ul = document.createElement('ul');
…
Затем добавьте новое правило CSS, чтобы скрыть
select.replaced {
display: none;
}
С применением нескольких изображений для завершения
дизайн (ссылка недоступна), мы готовы идти!
А вот еще одна ссылка с кем-то, кто говорит, что это невозможно.