Стиль по умолчанию избранного часто уродлив. Чтобы обеспечить единый стиль страницы, Select должен быть украшен. Несмотря на то, что есть много защищенных плагинов, поиск много, это действительно головная боль для введения длинных файлов CSS и файлов JS. Фактически, принцип реализации избранного очень прост, это процесс нажатия, чтобы переключить отображение, скрыть и пройти значения. Я смоделировал это с помощью jQuery и пишу любой стиль, который вы хотите, не ограничивая номер.
Простые эффекты:
HTML:
<div> <font >› </font> <pan> опция 1 </span> <ul> <li> Вариант 1 </li> <li> Опция 1 </li> <li> Опция 2 </li> <li> Вариант 3 </li> </ul> </div> <div> <font> </font> <pan> antain </li> <li> <li> <li> <li> <li> <li> <li> 3 </li> </ul> </div>
CSS:
ul {маржа: 0; Заполнение: 0; Список стиля: none;}. select_box {width: 200px; Высота: 36px; Граница: 1PX SOLID #3CF; позиция: относительно; Плавание: осталось; Право поля: 50px;}. select_box span {display: inline-block; Ширина: 200px; Высота: 36px; Кривор: указатель; Text-indent: 10px;}. SELECT_BOX .SPAN_AA {color:#C36;}. SELECT_BOX ul {ширина: 200px; позиция: абсолютно; Верх: 36px; слева: -1px; Граница: 1PX SOLID #3CF; дисплей: нет; фон: #fff;}. select_box li {coursor: pointer; высота линии: 36px; Text-indent: 10px;}. SELECT_BOX LI: HOVER {founal:#39F; Color: #fff;}. select_box font {position: Absolute; Справа: 10px; размер шрифта: 26px; Фондовая семья: «Microsoft Yahei»; Цвет:#3CF; Преобразование: вращение (90deg);}JS:
$ (function () {var s_title = $ (". select_box span"); var s_select = $ (". Select_box li"); s_title.click (function (e) {$ (this) .addclass ("span_aa"); $ (this) .next ("ul"). Show (); s_select.click (function () {var s_text = $ (this) .html (); var s_title_2 = $ (this) .parent ('ul'). prev ("span"); s_title_2.html (s_text) .removeclass ("span_aa"); $ (document) .click (function () {s_title.removeclass ("span_aa"); $ (". Select_box ul"). Hide ();});Скачать исходный код: JS SELECT DIMPLENT LONG BECTECTIANG Загрузить
Если вы все еще хотите учиться в глубине, вы можете нажать на резюме эффекта раскрывающейся коробки JQUERY и резюме эффекта раскрывающегося бокса JavaScript для изучения.
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.