🔥🔥 how to style select input in css
Hello, glad you are here. I am kunaal and today we will see how to make a custom select input, a custom options input. You can see demo below.
Demo
Video Tutorial —
If you find this article hard or for better explanation. You can watch video tutorial.
Let’s code
class="container"> class="select" name="select" value="options">options class="options"> class="item active">option 1 class="item">option 2 class="item">option 3 class="item">option 4 * margin: 0; padding: 0; box-sizing: border-box; > *:focus outline: none; > body width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #ff6767; font-family: 'roboto', sans-serif; > .container position: relative; > .select position: relative; width: 200px; height: 40px; border-radius: 10px; border: none; text-transform: capitalize; color: #fff; background: #292929; text-align: left; padding: 0 15px; font-size: 16px; cursor: pointer; > .select::after content: ''; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; > .select:hover background: #222222; > .select.active background: #222222; border-bottom-left-radius: 0; border-bottom-right-radius: 0; > .options position: absolute; top: 40px; left: 0; width: 100%; height: fit-content; background: rgba(0, 0, 0, 0.5); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; display: none; > .options.active display: block; > .options .item color: #fff; text-transform: capitalize; width: 100%; height: 30px; padding: 0 15px; line-height: 30px; cursor: pointer; > .options .item.active background: #292929; > const select = document.querySelector('.select'); const optionBox = document.querySelector('.options'); const options = [. document.querySelectorAll('.options .item')]; let activeOption = 0; // default should be 0 window.onclick = (e) => if(!e.target.className.includes('select')) select.classList.remove('active'); optionBox.classList.remove('active'); > else select.classList.toggle('active'); optionBox.classList.toggle('active'); > > options.forEach((item, i) => item.onmousemove = () => hoverOptions(i); > >) const hoverOptions = (i) => options[activeOption].classList.remove('active'); options[i].classList.add('active'); activeOption = i; setValue(); > window.onkeydown = (e) => if(select.className.includes('active')) e.preventDefault(); if(e.key === 'ArrowDown' && activeOption options.length - 1) hoverOptions(activeOption + 1); > else if(e.key === 'ArrowUp' && activeOption > 0) hoverOptions(activeOption - 1); > else if(e.key === 'Enter') select.classList.remove('active'); optionBox.classList.remove('active'); > > > const setValue = () => select.innerHTML = select.value = options[activeOption].innerHTML; > setValue(); I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.
If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.
How TO — Custom Select Box
Learn how to create custom select boxes with CSS and JavaScript.
Custom Select Box
Create a Custom Select Menu
Step 1) Add HTML:
Example
Step 2) Add CSS:
Example
/* The container must be positioned relative: */
.custom-select position: relative;
font-family: Arial;
>
.custom-select select display: none; /*hide original SELECT element: */
>
.select-selected background-color: DodgerBlue;
>
/* Style the arrow inside the select element: */
.select-selected:after position: absolute;
content: «»;
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
>
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after border-color: transparent transparent #fff transparent;
top: 7px;
>
/* style the items (options), including the selected item: */
.select-items div,.select-selected color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
>
/* Style items (options): */
.select-items position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
>
/* Hide the items when the select box is closed: */
.select-hide display: none;
>
.select-items div:hover, .same-as-selected background-color: rgba(0, 0, 0, 0.1);
>
Step 3) Add JavaScript:
Example
var x, i, j, l, ll, selElmnt, a, b, c;
/* Look for any elements with the class «custom-select»: */
x = document.getElementsByClassName(«custom-select»);
l = x.length;
for (i = 0; i < l; i++) selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
/* For each element, create a new DIV that will act as the selected item: */
a = document.createElement(«DIV»);
a.setAttribute(«class», «select-selected»);
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
/* For each element, create a new DIV that will contain the option list: */
b = document.createElement(«DIV»);
b.setAttribute(«class», «select-items select-hide»);
for (j = 1; j < ll; j++) /* For each option in the original select element,
create a new DIV that will act as an option item: */
c = document.createElement(«DIV»);
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener(«click», function(e) /* When an item is clicked, update the original select box,
and the selected item: */
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName(«select»)[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) if (s.options[i].innerHTML == this.innerHTML) s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName(«same-as-selected»);
yl = y.length;
for (k = 0; k < yl; k++) y[k].removeAttribute("class");
>
this.setAttribute(«class», «same-as-selected»);
break;
>
>
h.click();
>);
b.appendChild(c);
>
x[i].appendChild(b);
a.addEventListener(«click», function(e) /* When the select box is clicked, close any other select boxes,
and open/close the current select box: */
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle(«select-hide»);
this.classList.toggle(«select-arrow-active»);
>);
>
function closeAllSelect(elmnt) /* A function that will close all select boxes in the document,
except the current select box: */
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName(«select-items»);
y = document.getElementsByClassName(«select-selected»);
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) if (elmnt == y[i]) arrNo.push(i)
> else y[i].classList.remove(«select-arrow-active»);
>
>
for (i = 0; i < xl; i++) if (arrNo.indexOf(i)) x[i].classList.add("select-hide");
>
>
>
/* If the user clicks anywhere outside the select box,
then close all select boxes: */
document.addEventListener(«click», closeAllSelect);
Стилизация Select с помощью css, как будто это 2020
Select – этот элемент трудно стилизовать для всех браузеров. Чтобы избегать его недостатки раньше, мы использовали обходные пути, такие как стилизация родительского элемента, добавление псевдоэлементов и даже использование JavaScript для создания подобного элемента управления из различных элементов, которые легче стилизовать. Но обходные пути сложно поддерживать и использовать, не говоря уже о проблемах доступности, которые создают пользовательские элементы.
Как выясняется, разумный набор стилей для select можно создать согласованно и привлекательно для новых браузеров, не меняясь при этом и в старых.
Быстрый Пример
Вот элемент select без стиля . Он будет выглядеть немного иначе, в зависимости от браузера, который вы используете.
Ниже представлен тот же элемент select, стилизованный непосредственно с помощью CSS. Никаких дополнительных элементов обертки или псевдоэлементов не требуется (за исключением одного, который необходим для IE10 +):
HTML-код для приведенного select приведен ниже. Обратите внимание, что CSS применяется к любому select с классом select-css.
А вот CSS, управляющий select:
.select-css < display: block; font-size: 16px; font-family: sans-serif; font-weight: 700; color: #444; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); border-radius: .5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; >.select-css::-ms-expand < display: none; >.select-css:hover < border-color: #888; >.select-css:focus < border-color: #aaa; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; >.select-css option < font-weight:normal; >*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css Примечания по CSS
CSS для этого прекрасно использовать как есть, но если вы хотите его редактировать, вам может понадобиться знать о нескольких числах и значениях, которые помогают ему выглядеть правильно.
- Select Устанавливается на display: block; по умолчанию, но вы можете поменять его, display: inline-block; width: auto; если хотите, чтобы он сидел рядом с label.
- Фон select создается с использованием двух фоновых изображений: первое — это значок стрелки svg (выраженный в виде URI данных), а второе — повторяющийся линейный градиент. Любой URL может быть внешним изображением, если хотите. Если вы меняете изображение значка, имейте в виду, что его размер установлен в первом разделе последующего background-size: .65em auto, 100%; свойства. И его положение задается через background-position: right .7em top 50%, 0 0;(который находится .7em с правой стороны, соответственно). Кроме того, если размер изменяется, вы можете захотеть сделать более правый отступ для кнопки, чтобы она не перекрывала select текст, но имейте в виду, что в IE9 и более ранних версиях пользовательская стрелка не появится и браузер по умолчанию Стрелка будет отображаться слева от отступа, поэтому не добавляйте слишком много, иначе стрелка IE9 будет вставлена очень далеко.
- Важно сохранить линейный градиентный фон, потому что его наличие на самом деле мешает IE9 и старше распознавать свойство background, и в результате он не будет показывать пользовательский значок рядом со своим невидимым собственным. Если вы хотите плоский цвет, используйте линейный градиент между двумя одинаковыми значениями цвета.
- Appearance Правило и его и приставочные версии имеют важное значение, чтобы сбросить стили некоторых браузеров по умолчанию.
- font-size: 16px; Правило важно , потому что IOS Safari будет увеличивать его в макете сайта , если select текст меньше 16px. Обычно такое поведение раздражает, поэтому мы стараемся избегать его с размером шрифта 16 пикселей на select.
- .select-css::-ms-expand Правило предписывает IE11 и IE10 , чтобы скрыть псевдоэлемент меню значка, поэтому может появиться пользовательский значок позади него.
Как это выглядит в разных браузерах
Вот несколько скриншотов select в различных браузерах. В некоторых браузерах, таких как IE9 и старше, дизайн иконок не полностью поддерживается, но элемент управления можно использовать и выглядит достаточно хорошо для наших обычных целей.
Наслаждайтесь!
Обновление статьи 3.06.20
Стилизация пунктов option
В интернете есть много решений как стилизовать пункты выбора. Ниже приведены три популярных способа.
2. С помощью стилизации label со скрытыми input
3. С помощью списка li и скрытого input
Стилизация — это конечно хорошо, но доступность нужна не меньше.
Заменяя стандартные элементы управления самодельными, придется реализовывать штатные возможности самостоятельно.
В последних двух приведенных примерах без мыши/тачскрина (с помощью клавиатуры/скринридера) сделать ничего нельзя. Скринридер в режиме чтения тоже ограничен. После долгих изысканий в дизайне и функционале я пришел к выводу, что лучше просто оставить select как есть.
И это все. Спасибо за прочтение.