Насколько я знаю, в 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>, скорее всего, будет выглядеть примерно так:

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

или это

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

Допустим, мы хотим сделать его немного более современным, возможно, так:

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

Так как же нам это сделать? Сохранение базового <select> - не вариант. Помимо базового цвета фона, настроек шрифта и цвета, вы не можете полностью контролировать файл.

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

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

Решение

Войдите в DOM. Последний шаг в процессе - сделать <ul> function / похожим на <select>, и мы можем добиться этого с помощью сценария JavaScript / ECMA и небольшого хитроумного 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 используем его как «selectOpen». Причина этого двоякая:

1. CSS предназначен для представления, а не поведения; и
2. мы хотим, чтобы наш faux-<select> вёл себя как настоящий <select>, нам нужно, чтобы список открывался в событии onclick, а не при простом наведении указателя мыши.

Чтобы реализовать это, мы можем взять то, что мы узнали от Suckerfish, и применить это к нашему собственному JavaScript, динамически назначая и удаляя этот class в событиях onclickevents for the list items. To do this right, we will need the ability to change theonclick для каждого элемента списка на лету, чтобы переключаться между следующими двумя действиями:

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

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

Как нас учил оригинальный Suckerfish, IE не распознает состояние зависания ни на чем, кроме <a>, поэтому нам нужно учитывать это, дополняя часть нашего кода тем, что мы узнали от них. Мы можем прикрепить события onmouseover и 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 фу

У нас уже есть «выбранный» 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>s. Если вам (по какой-то причине) нужно было назначить дополнительные классы элементам списка, я рекомендую изменить код, чтобы добавить и удалить «выбранный» класс в вашем свойстве 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 byclass`-используя его как «замененный», добавив его в 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;
}

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

А вот еще одна ссылка на кого-то, кто говорит, что это невозможно.

экстраполируйте это! :)

  filter: 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000)
    progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000)
    progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000)
    progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000);

Из моего личного опыта, когда мы пытались поставить красную границу, когда была выбрана недопустимая запись, невозможно установить красную границу для элемента выбора в IE.

Как указывалось ранее, ocntrols в Internet Explorer использует WindowsAPI для рисования и рендеринга, и вам нечего решать.

Нашим решением было сделать цвет фона выбранного элемента светло-красным (чтобы текст был читабельным). цвет фона работал в каждом браузере, но в IE у нас были побочные эффекты: элемент имел тот же цвет фона, что и выбранный.

Итак, чтобы резюмировать решение, которое мы поставили:

select
{
  background-color:light-red;
  border: 2px solid red;
}
option
{
  background-color:white;
}

Обратите внимание, что цвет был установлен шестнадцатеричным кодом, просто не помню какой.

Это решение давало нам желаемый эффект в каждом браузере, за исключением красной границы в IE.

Удачи

У меня была такая же проблема с ie, затем я вставил этот метатег, и он позволил мне редактировать границы в ie.

<meta http-equiv="X-UA-Compatible" content="IE=100" >

Использование ТОЛЬКО css невозможно. Фактически, все элементы формы невозможно настроить так, чтобы они выглядели одинаково во всех браузерах только с помощью css. Однако вы можете попробовать niceforms;)

IE ‹8 не отображает сам выпадающий список, он просто использует элемент управления Windows, который не может быть оформлен таким образом. Начиная с IE 8 это изменилось, и теперь применяется стиль. Конечно, его рыночная доля пока невелика.

Я работал над невозможностью поставить рамку для выбора в IE7 (IE8 в режиме совместимости)

Если дать ему границу и отступ, это выглядит как что-то ....

Не все, но это начало ...

Посмотрите этот код ... надеюсь, ты счастлив :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<style type="text/css">
*{margin:0;padding:0;}
select {font: normal 13px Arial, SansSerif, Verdana; color: black;}
.wrapper{width:198px; position: relative;  height: 20px; overflow: hidden; border-top:1px solid #dddddd; border-left:1px solid #dddddd;}
.Select{color: black; background: #fff;position: absolute; width: 200px; top: -2px; left: -2px;}
optgroup{background-color:#0099CC;color:#ffffff;}
</style>
</head>

<body>
<div class="wrapper">
<select class="Select">
<optgroup label="WebDevelopment"></optgroup>
<option>ASP</option>
<option>PHP</option>
<option>ColdFusion</option>
<optgroup label="Web Design"></optgroup>
<option>Adobe Photoshop</option>
<option>DreamWeaver</option>
<option>CSS</option>
<option>Adobe Flash</option>
</select>
</div>
</body>
</html>

Саджай

Свойство border-style - это сокращенная команда для определения стилей границ всех сторон элемента html. У каждой стороны может быть свой стиль.

http://www.handycss.com/tips/styling-borders-with-css/

Вам понадобится специально разработанное поле выбора с CSS и JavaScript. Вам нужно быть абсолютно уверенным, что он полностью деградирует до стандартного элемента select, если у пользователя отключен JavaScript.

ИМО, это просто не стоит усилий. Придерживайтесь стиля шрифта в выделенном фрагменте, чтобы он соответствовал дизайну вашего сайта; оставьте границы и т. д. элементам бокса.

Чтобы сделать границу вдоль одной стороны выбора в IE, используйте фильтры IE:

select.required {border-left: 2 пикселя сплошной красный; filter: progid: DXImageTransform.Microsoft.dropshadow (OffX = -2, OffY = 0, color = # FF0000)}

Я помещаю границу только с одной стороны всех моих входов для требуемого статуса.

Вероятно, есть эффекты, которые лучше подходят для круговой границы ...

http://msdn.microsoft.com/en-us/library/ms532853(v=VS.85).aspx

Просто добавьте объявление doctype перед тегом html

ex.: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

Он также будет работать с файлами JSP. Для получения дополнительной информации: HTML Doctype Declaration

Оно работает!!! Используйте следующий код:

<style>
div.select-container{
   border: 1px black;width:200px;
}
</style>


<div id="status" class="select-container">
    <select name="status">
        <option value="" >Please Select...</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
</div>

Для меня это решает:

.select-container {
  position:relative;
  width:200px;
  height:18px;
  overflow:hidden;
  border:1px solid white !important
}
.select-container select {
  position:relative;
  left:-2px;
  top:-2px
}

Чтобы добавить больше стиля, необходимо будет использовать вложенные div.