Подтвердить что ты не робот

Граница IE6/IE7 css для выбранного элемента

Есть ли у кого-нибудь решение для стилизации границ элементов "выбрать" в Internet Explorer с помощью CSS?

4b9b3361

ОТВЕТЫ

Ответ 1

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

A <select> как показано в Windows XP/Firefox 1.0.2. http://v2.easy-designs.net/articles/replaceSelect/images/ffSelect.png

или

A <select> как показано в Mac OSX/Safari 1.2. http://v2.easy-designs.net/articles/replaceSelect/images/safariSelect.png

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

Наша концепция красивого стиля <select> . <А3 >

Итак, как мы это делаем? Сохранение базового <select> не является вариантом. Помимо базовый цвет фона, настройки шрифта и цвета, у вас на самом деле нет много контроля над.

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

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

Решение

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

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

С помощью этого плана мы можем начать решать каждую часть подряд.

Построение списка

Итак, сначала нам нужно собрать все атрибуты и s из  и перестроить его как. Мы выполнили это, выполнив следующие JS:

function selectReplacement(obj) {
  var ul = document.createElement('ul');
  ul.className = 'selectReplacement';
  // collect our object 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>, а затем сохранить это значение в 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;
}

Теперь, чтобы обработать элемент "selected" list, нам нужно немного улучшить:

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>, чтобы сделать это open, вместо этого мы class - это как "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` для каждого элемента списка "на лету" для переключения между следующими двумя действиями:

  • показывает полный faux- <select> при нажатии на выбранную/стандартную опцию, когда список свернут; и
  • "выберите" элемент списка, когда он щелкнут, и скройте 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;
}

Теперь у нас есть список, который ведет себя как a <select>; но мы все еще необходимо изменить значение выбранного элемента списка и обновить значение связанный элемент формы.

JavaScript fu

У нас уже есть "выбранный" class, который мы можем применить к нашему элементу выбранного списка, но нам нужно найти способ применить его к <li>, когда он нажат и удалить его из любого из своих ранее "выбранных" братьев и сестер. Здесь JS для этого:

function selectMe(obj) {
  // get the <li> 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 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 class`-ing его как "замененный", добавив что для 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;
}

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

И вот еще одна ссылка

Ответ 2

экстраполировать его!:)

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

Ответ 3

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

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

Каково было наше решение, чтобы цвет фона элемента выбора был красным (чтобы текст был доступен для чтения). цвет фона работал в каждом браузере, но в IE у нас были побочные эффекты, которые имеют тот же цвет фона, что и выделение.

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

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

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

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

Удачи.

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

<!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>

Sajay

Ответ 7

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

Ответ 8

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

Отдавая ему границу, как дополнение, это похоже на что-то....

Не все, но оно начинается...

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

Он решает мне, для моих целей:

.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.

Ответ 12

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

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

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

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

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

Ответ 13

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

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

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

Ответ 14

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

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