Насколько я знаю, это не возможно в IE, потому что это использует компонент ОС.

Вот ссылка , где управление заменяется, но я не знаю, является ли это тем, что Вы хотите сделать.

Редактирование: связь разорвана, я вывожу содержание

<select> Что-то Новое, Часть 1

Aaron Gustafson

, Таким образом, Вы создали красивый, совместимый стандартами сайт, использующий последние и самые большие методы CSS. Вы освоили управление моделирования каждого элемента, но подсознательно, тихий голос ворчит Вас о том, насколько ужасный Ваш <select> с. Ну, сегодня мы собираемся исследовать способ заставить ту небольшую речь замолчать и действительно завершенный наши проекты. С небольшими сценариями DOM и некоторым творческим CSS, также можно сделать Ваш <select> с beautiful†¦, и Вы не должны будете жертвовать доступностью, удобством использования или постепенным ухудшением.

проблема

Все мы знаем эти <select>, просто ужасно. На самом деле многие пытаются ограничить его использование для предотвращения его классической сети приблизительно 1 994 границы вставки. Мы не должны избегать использования <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> вероятный примерно походит на это:

_{(источник: easy-designs.net )}

или это

_{(источник: easy-designs.net )}

Скажем, мы хотим заставить его выглядеть немного более современным, возможно, как это:

_{(источник: easy-designs.net )}

Поэтому, как мы делаем это? Хранение основного <select> не является опцией. Кроме основного цвета фона, шрифта и настроек цвета, Вы действительно не имеете большой контроль.

Однако мы можем подражать превосходной функциональности <select> в новом управлении формой, не жертвуя семантикой, удобством использования или доступностью. Чтобы сделать это, мы должны исследовать природу <select>.

А <select> является, по существу, незаказанным списком выбора, в котором можно выбрать единственное значение для представления наряду с остальной частью формы. Так, в сущности это <ul> на стероидах. Продолжая тот ход мыслей, мы можем заменить <select> незаказанным списком, пока мы даем ему некоторую расширенную функциональность. Как [1 131] с может быть разработана в несметном числе различных путей, мы почти домашние свободный. Теперь вопросы становятся, "как удостовериться, чтобы мы поддержали функциональность <select> при использовании <ul>?" Другими словами, как мы отправляем правильное значение наряду с формой, если мы больше не используем управление формой?

решение

Вводят DOM. Заключительный шаг в процессе делает эти <ul>, функционируют/чувствуют себя подобно <select>, и мы можем выполнить это со Сценарием JavaScript/ECMA и небольшим умным CSS. Вот основной список требований, у нас должно быть функциональное поддельное <select>:

• нажимают список для открытия, он,
• нажимает на элементы списка для изменения значения присвоенный & закройте список,
• показывают значение по умолчанию, когда ничто не выбрано, и
• показывают выбранный элемент списка, когда что-то выбрано.

С этим планом, мы можем начать заниматься каждой частью по очереди.

Здание список

Поэтому сначала мы должны собрать все атрибуты и s из и восстановить его как a. Мы выполняем это путем выполнения следующего 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> с, чтобы искать выбранный <option> и затем сохранить то значение чтобы к [1 140] наш выбранный <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> в значительной степени похож на выпадающее меню, хотя с немного большим количеством продолжения под капотом. Почему бы не применять ту же стилистическую теорию к нашему поддельному - <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;
}

Уведомление, которое мы не используем: псевдокласс при наведении курсора для <ul>, чтобы заставить его открыться, вместо этого мы class - луг он как "selectOpen". Причина этого является двукратной:

1. CSS для презентации, не поведения; и
2. мы хотим наше поддельное - <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' для каждого элемента списка на лету для переключения между следующими двумя действиями:

1. показывают полное поддельное - <select> при нажатии на выбранную/опцию по умолчанию, когда список сворачивается; и
2. "выбирают" элемент списка, когда он нажат & сверните поддельное - <select>.

Мы создадим функцию, вызванную selectMe() для обработки переназначения "выбранного" class, переназначения эти onclick события для элементов списка и сворачивание поддельного - <select>:

, Поскольку исходный Suckerfish учил нас, IE не распознает состояние при наведении курсора ни на чем кроме <a>, таким образом, мы должны будем объяснить это путем увеличения части нашего кода с тем, что мы изучили от них. Мы можем присоединить onmouseover и onmouseout события к "selectReplacement" class - редактор <ul> и <li> с:

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> с:

…
  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);
  }
…

Там у Вас есть он. Мы создали наше функциональное поддельное - . As we have not hidden the original yet, 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;
}

С приложением нескольких изображений для завершения дизайна (свяжитесь не доступный), мы хороши для движения!

И вот другой ссылка кому-то, который говорит, что она не может быть сделана.