Граница css IE6 / IE7 на элементе select
Есть ли у кого-нибудь решение для стилизации границ «избранных» элементов в Internet Explorer с помощью CSS?
Ответы 13
Вам понадобится специально разработанное поле выбора с CSS и JavaScript. Вам нужно быть абсолютно уверенным, что он полностью деградирует до стандартного элемента select, если у пользователя отключен JavaScript.
ИМО, это просто не стоит усилий. Придерживайтесь стиля шрифта в выделенном фрагменте, чтобы он соответствовал дизайну вашего сайта; оставьте границы и т. д. элементам коробки.
Использование ТОЛЬКО css невозможно. Фактически, все элементы формы невозможно настроить так, чтобы они выглядели одинаково во всех браузерах только с помощью css. Хотя вы можете попробовать красивые формы;)
Выглядит неплохо - вы реализовали это на каких-либо сайтах?
Однажды я попробовал, но мне это не понравилось, поэтому я написал свой собственный сценарий: P
Хорошая ссылка, спасибо. Но (неудивительно): «Скрипт полностью совместим и был протестирован с большинством основных браузеров, за исключением IE6».
@Daniel: IE6 - это браузер, которому уже 10 лет. Разве ты не хочешь дать ему покой? :) Кроме того: dowebsitesneedtolookexactlythesameineverybrowser.com;)
Не поймите меня неправильно, я ненавидеть IE6 (как и все, кто занимается веб-разработкой) и на 100% согласен с тем, что веб-сайты не должны разрабатываться «до пикселя» или ожидать, что они будут выглядеть одинаково в каждом браузере. Я просто хотел указать на это, потому что вопрос явно указывает IE6 / IE7.
Дэниел, в то время, когда я разместил ссылку, я думаю, что v2 еще не вышла (или была в бета-версии?). v1 работает нормально и на ie6 :)
Из моего личного опыта, когда мы пытались поставить красную границу, когда была выбрана недопустимая запись, невозможно поставить красную границу для элемента выбора в IE.
Как указывалось ранее, ocntrols в Internet Explorer использует WindowsAPI для рисования и рендеринга, и вам нечего решать.
Нашим решением было сделать цвет фона выбранного элемента светло-красным (чтобы текст был читабельным). цвет фона работал в каждом браузере, но в IE у нас были побочные эффекты: элемент имел тот же цвет фона, что и выбранный.
Итак, чтобы резюмировать решение, которое мы поставили:
select
{
background-color:light-red;
border: 2px solid red;
}
option
{
background-color:white;
}
Обратите внимание, что цвет был задан шестнадцатеричным кодом, просто не помню какой.
Это решение давало нам желаемый эффект в каждом браузере, за исключением красной границы в IE.
Удачи
Подобно этому, вы должны просто обернуть тег select в div с рамкой на нем.
Посмотрите этот код ... надеюсь, ты счастлив :)
<!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>
Саджай
IE <8 не отображает сам выпадающий список, он просто использует элемент управления Windows, который не может быть оформлен таким образом. Начиная с IE 8 это изменилось, и теперь применяется стиль. Конечно, его рыночная доля пока невелика.
Я работал над невозможностью поставить рамку для выбора в IE7 (IE8 в режиме совместимости)
Если дать ему границу и прокладку, это будет похоже на что-то ....
Не все, но это начало ...
Для меня это решает:
.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.
Чтобы сделать границу вдоль одной стороны выбора в IE, используйте фильтры IE:
select.required { border-left: сплошной красный 2px; фильтр: progid: DXImageTransform.Microsoft.dropshadow (OffX = -2, OffY = 0, цвет = # FF0000) }
Я помещаю рамку только с одной стороны всех моих входов для требуемого статуса.
Вероятно, есть эффекты, которые лучше подходят для круговой границы ...
http://msdn.microsoft.com/en-us/library/ms532853(v=VS.85).aspx
экстраполируйте это! :)
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);
Это отличная альтернатива тому, что я делал в IE7 и ниже, когда использовал обертку div вокруг элемента. А в IE8 + я могу просто использовать более стандартное свойство структуры.
Недавно я понял, что при повторном применении фильтра элемент больше не отображается. Я выделил красным в целях проверки. Если проверка снова запустится, мой выделенный элемент исчезнет. Все еще отличное решение, но вернемся к чертежной доске для меня.
Просто добавьте объявление doctype перед тегом html
например: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
Он также будет работать с файлами JSP. Для получения дополнительной информации: Объявление HTML Doctype
Оно работает!!! Используйте следующий код:
<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>
У меня была такая же проблема с ie, затем я вставил этот метатег, и он позволил мне редактировать границы в ie.
<meta http-equiv = "X-UA-Compatible" content = "IE=100" >
Свойство border-style - это сокращенная команда для определения стилей границ всех сторон элемента html. У каждой стороны может быть свой стиль.
Вы можете просто обернуть тег select div и поставить границу на этом div