Есть ли у кого-нибудь решение для стилизации границ «выбранных» элементов в Internet Explorer с помощью CSS?
Граница css IE6 / IE7 на выбранном элементе
Ответы (14)
Насколько я знаю, в 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». Причина этого двоякая:
- CSS предназначен для представления, а не поведения; и
- мы хотим, чтобы наш faux-
<select>
вёл себя как настоящий<select>
, нам нужно, чтобы список открывался в событииonclick
, а не при простом наведении указателя мыши.
Чтобы реализовать это, мы можем взять то, что мы узнали от Suckerfish, и применить это к нашему собственному JavaScript, динамически назначая и удаляя этот class
в событиях onclickevents 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;
}
Теперь у нас есть список, который ведет себя как <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 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`-используя его как «замененный», добавив его в 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.