Меню
раздел: Простая стилизация SELECT методами javascript

Простая стилизация SELECT методами javascript

Стилизуем стандартный выпадающий список SELECT методами javascript.

Мы рассмотрим именно изменение оформления и дизайна тега SELECT без замены его на псевдоэлементы.

Поменять цвет, фон, изменить рамку выбранного элемента option SELECT или всего тега SELECT можно используя методы DOM для работы с элементами или обратившись к нужному элементу через объектную модель браузера.

Изменить цвет текста option:

document.getElementById("SelectMyFrutis").options[n].setAttribute('style',"color:red");
// или
document.getElementById("SelectMyFrutis").options[n].style.color="red";


Изменить цвет фона option:

document.getElementById("SelectMyFrutis").options[n].setAttribute('style',"background-color:#008000");
// или
document.getElementById("SelectMyFrutis").options[n].style.background="#008000";


Изменить цвет и толщину рамки option:

document.getElementById("SelectMyFrutis").options[n].setAttribute('style',"border:2px solid #FF8000");
// или
document.getElementById("SelectMyFrutis").options[n].style.border="2px solid #FF8000";


Аналогично поступаем если необходимо поменять какой либо из элементов стиля всего тега SELECT например изменить рамку и цвет текста:

document.getElementById("SelectMyFrutis").setAttribute('style',"border:2px solid #FF8000");
// или
document.getElementById("SelectMyFrutis").style.border="2px solid #FF8000";


Назначить и удалить класс у элемента SELECT через javascript:

// назначаем класс
document.getElementById("SelectMyFrutis").className = "s1";
// удалить класс - это удалит все классы которые назначены элементу
 document.getElementById("SelectMyFrutis").className = "";
 // что бы удалить определённый класс
 // спецификация HTML 5 :
 document.getElementById("SelectMyFrutis").classList.remove("s1");


В качестве примера напишем функцию ChangeStyle() которая покажет выбран или нет любимый фрукт изменив оформление SELECT. Если фрукт не выбран рамка будет красного цвета.

 
<html> <head> <title> </title> </head> <body> <script type="text/javascript"> function ChangeStyle() { var n = document.getElementById("SelectMyLove").options.selectedIndex; if(n==0)//порядковый номер выбранного элемента списка { document.getElementById("SelectMyLove").style.border="4px solid red"; }else { document.getElementById("SelectMyLove").style.border="4px solid #EFEFEF"; } } </script> <FORM id="FormMyLove" name="FormMyLove" > <SELECT name="SelectMyLove" id="SelectMyLove" OnChange='ChangeStyle()' > <OPTION VALUE="0">Выбираем любимый фрукт</OPTION> <OPTION VALUE="1">Абрикос</OPTION> <OPTION VALUE="2">Персик</OPTION> <OPTION VALUE="3">Слива</OPTION> <OPTION VALUE="7">Груша</OPTION> </SELECT> </FORM> </body> </html>
Ещё в этом разделе: