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

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

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

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

Изменить: ссылка сломана Я сбрасываю содержимое

Что-то новое, часть 1

Автор Аарон Густафсон

Таким образом, вы создали красивый, соответствующий стандартам сайт, использующий новейшие и самые лучшие методы CSS. Вы овладели контролем над стилем каждого элемента, но в глубине души маленький голос называет вас о том, насколько уродливы ваши s. Итак, сегодня мы собираемся изучить способ заставить замолчать этот маленький голос и действительно завершить наши проекты. С небольшим сценарием DOM и некоторым креативным CSS вы тоже можете сделать свой красивым … и вам не придется жертвовать доступностью, удобством использования или грациозной деgradleацией.

Проблема

Мы все знаем, что просто уродливый. На самом деле многие пытаются ограничить его использование, чтобы избежать его classической сети около границ вставки в 1994 году. Мы не должны избегать использования хотя – это важная часть текущего набора инструментов формы; мы должны принять его. Тем не менее, некоторое творческое мышление может улучшить его.

Мы будем использовать простой для нашего примера:

  

[Примечание: подразумевается, что этот находится в контексте полной формы.]

Таким образом, у нас есть пять s внутри . Этот имеет уникально присвоенный id «что-то». В зависимости от браузера / платформы, которую вы просматриваете, ваш выглядит примерно так:

A

или это

A <выберите>, как показано в Mac OSX / Safari 1.2. http://v2.easy-designs.net/articles/replaceSelect/images/safariSelect.png

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

Наша концепция красивого стиля

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

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

A – это, по сути, неупорядоченный список вариантов, в которых вы можете выбрать одно значение для отправки вместе с остальной формой. Таким образом, по сути, это

    на стероидах. Продолжая эту линию мышления, мы можем заменить на неупорядоченный список, если мы дадим ему некоторые расширенные функции. Поскольку

      s можно разузнать множеством разных способов, мы почти свободны на дому. Теперь вопросы становятся «как обеспечить, чтобы мы поддерживали функциональность при использовании

        ?” Другими словами, как мы можем представить правильное значение вместе с формой, если мы больше не используем элемент управления формой?

        Решение

        Введите DOM. Последним этапом процесса является функция

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

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

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

          Создание списка

          Поэтому сначала нам нужно собрать все атрибуты и 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 
        • s for (var i=0; i
        • Возможно, вы думаете: «Теперь, что произойдет, если уже есть выбранный ?» Мы можем объяснить это, добавив еще один цикл, прежде чем мы создадим

        • s для поиска выбранной , а затем сохраним это значение, чтобы class выбранному

        • как «selected»:

           … var opts = obj.options; // check for the selected option (default to the first option) for (var i=0; i 

          [Примечание: здесь выберем вариант 5, чтобы продемонстрировать эту функциональность.]

          Теперь мы можем запустить эту функцию на каждом на странице (в нашем случае, на одном) со следующим:

           function setForm() { var s = document.getElementsByTagName('select'); for (var i=0; i 

          Мы почти там; давайте добавим некоторый стиль.

          Некоторые умные CSS

          Я не знаю о вас, но я большой поклонник выпадающих списков CSS (особенно сорт Suckerfish ). Я работал с ними какое-то время, и наконец я понял, что похож на выпадающее меню, хотя и немного больше под капотом. Почему бы не применить ту же стилистическую теорию к нашему искусству - ? Основной стиль выглядит примерно так:

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

          Обратите внимание, что мы не используем псевдо-class hover для

            чтобы он был открыт, вместо этого мы class его как «selectOpen». Причина этого двоякая:

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

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

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

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

            Как учил нас оригинальный Suckerfish, IE не признает состояние зависания ни на чем, кроме , поэтому нам нужно учитывать это, дополняя часть нашего кода тем, что мы узнали от них. Мы можем прикреплять события onmouseover и onmouseout к class «selectReplacement» -ed

              и его

            • 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 

              Затем мы можем изменить несколько селекторов в 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 ; но нам по-прежнему необходимо изменить выбранный элемент списка и обновить значение связанного элемента формы.

              JavaScript fu

              У нас уже есть «выбранный» class мы можем применить к нашему выбранному элементу списка, но нам нужно найти способ применить его к

            • при нажатии и удалении его из любого из ранее выбранных «братьев». Вот JS для этого:

               function selectMe(obj) { // get the 
            • 's siblings var lis = obj.parentNode.getElementsByTagName('li'); // loop through for (var i=0; i
            • , remove selected class if (lis[i] != obj) { lis[i].className=''; } else { // our selected
            • , add selected class lis[i].className='selected'; } } }
            • [Примечание: мы можем использовать простое назначение className и опорожнение, потому что мы полностью контролируем

            • s. Если вам (по какой-то причине) необходимо назначить дополнительные classы для ваших элементов списка, я рекомендую изменить код, чтобы добавить и удалить «выбранный» class в свой className .

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

            • :

               function setVal(objID, selIndex) { var obj = document.getElementById(objID); obj.selectedIndex = selIndex; } 

              Затем мы можем добавить эти функции в событие onclick наших

            • s:

               … for (var i=0; i 

              Там у вас это есть. Мы создали наш функциональный фальсификатор . As we have not hidden the original . 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 . 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); 

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

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

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

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

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

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

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

              Удачи

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

                

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

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

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

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

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

              Проверьте этот код … надеюсь, ур счастлив 🙂

                   Untitled Document    

              Sajay

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

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

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

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

              Чтобы сделать границу вдоль одной стороны от выбора в 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

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

              например:

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

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

                

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

               .select-container { position:relative; width:200px; height:18px; overflow:hidden; border:1px solid white !important } .select-container select { position:relative; left:-2px; top:-2px } направо .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.

            • Не удалось загрузить ресурс в Chrome
            • Как определить совместимость HTML 5 в браузере
            • Как вернуть «Режим браузера» в IE11?
            • IE7 и свойство table-cell CSS
            • Поддержка браузера для номеров страниц CSS
            • Как выполнить базовую проверку подлинности для FirefoxDriver, ChromeDriver и IEdriver в Selenium WebDriver?
            • Поддержка браузера для URL-адресов, начинающихся с двойной косой черты
            • Force IE8 В режим совместимости IE7
            • Что такое WebKit и как это связано с CSS?
            • Доступны ли методы PUT, DELETE, HEAD и т. Д. В большинстве веб-браузеров?
            • Как отключить представление совместимости в IE WebBrowserControl в приложении WinForms?
            • Давайте будем гением компьютера.