Стилизация Select и Option / CSS + JS метод 2021 года

Стандартный Select, это не совсем то что нужно при разработке сайта. Зачастую дизайнеры, рисуют такие select что вообще трудно поверить что это как то можно стилизовать при верстке.

И это действительно так, ведь стандартный select трудно стилизовать, что бы он выглядел как в дизайне.

У нас с вами есть js. И с помощью маленького скрипта и css мы можем повторить за дизайнером.

И так, давайте для начала посмотрим что представляет из себя стандартный select и список из option

<select name="" id="">
   <option value="">Option 1</option>
   <option value="">Option 2</option>
   <option value="">Option 3</option>
   <option value="">Option 4</option>
</select>
Вот это «чудо»

Не совсем то что нам нужно… Давайте за основу возьмём дизайн из реального проекта, и посмотрим что можно сделать что бы приблизиться к нему с помощью css и js.

Сразу же повторюсь, без js у нас нечего не выйдет. Нам придётся написать несколько строк, для того что бы из первого варианта, получился тот что по красивее.

И да, мы будет с вами делать не совсем Select, но функциональность будет именно как у Select и Option. Приступим.

1. Для начала нам нужна HTML структура

<div class="__select" data-state="">
 <div class="__select__title" data-default="Option 0">Dropdown</div>
 <div class="__select__content">
	<input id="singleSelect0" class="__select__input" type="radio" name="singleSelect" checked />
	<label for="singleSelect0" class="__select__label">Option 0</label>
	<input id="singleSelect1" class="__select__input" type="radio" name="singleSelect" />
	<label for="singleSelect1" class="__select__label">Option 1</label>
	<input id="singleSelect2" class="__select__input" type="radio" name="singleSelect"/>
	<label for="singleSelect2" class="__select__label">Option 2</label>
	<input id="singleSelect3" class="__select__input" type="radio" name="singleSelect" />
	<label for="singleSelect3" class="__select__label">Option 3</label>
	<input id="singleSelect4" class="__select__input" type="radio" name="singleSelect" />
	<label for="singleSelect4" class="__select__label">Option 4</label>
	<input id="singleSelect5" class="__select__input" type="radio" name="singleSelect" />
	<label for="singleSelect5" class="__select__label">Option 5</label> <input id="singleSelect6" class="__select__input" type="radio" name="singleSelect" />
	<label for="singleSelect6" class="__select__label">Option 6</label><input id="singleSelect7" class="__select__input" type="radio" name="singleSelect" />
	<label for="singleSelect7" class="__select__label">Option 7</label><input id="singleSelect8" class="__select__input" type="radio" name="singleSelect" />
	<label for="singleSelect8" class="__select__label">Option 8</label>				      
 </div>
</div>

Как мы видим у нас не совсем тег Select, а мы используем input и label. Но какая разница, если у нас есть задача сверстать как в дизайне. Тем более вариант этот рабочий с точки зрения дальнейшей валидации этой формы и использовании её где-то в проекте.

2. Далее запихиваем CSS код в наш css файл

.__select {
  position: relative;
  margin: 0 auto;
}
.__select[data-state=active] .__select__title::before {
  transform: translate(-3px, -50%) rotate(-45deg);
}
.__select[data-state=active] .__select__title::after {
  transform: translate(3px, -50%) rotate(45deg);
}
.__select[data-state=active] .__select__content {
  opacity: 1;
}
.__select[data-state=active] .__select__label + .__select__input + .__select__label {
  max-height: 40px;
  width: 97%;
  margin: 0 auto;
}

.__select__title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 13px 20px;
  background: #E2F3FF;
  border-radius: 16px;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 1px;
  color: rgba(12, 45, 69, 0.8);
}
.__select__title::before, .__select__title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  display: block;
  width: 10px;
  height: 2px;
  transition: all 0.3s ease-out;
  background-color: #333333;
  transform: translate(-3px, -50%) rotate(45deg);
}
.__select__title::after {
  transform: translate(3px, -50%) rotate(-45deg);
}
.__select__title:hover {
  border-color: #D8093A;
}
.__select__title:hover::before, .__select__title:hover::after {
  background-color: #30A7FE;
}

.reset {
  display: flex;
  width: 230px;
  padding: 8px 16px;
  margin: 0 auto;
  margin-bottom: 10px;
  border: solid 1px #c7ccd1;
  border-radius: 5px;
  transition: all 0.2s ease-out;
  cursor: pointer;
  font-weight: bold;
  background-color: #ffffff;
  color: #333333;
}
.reset:hover {
  background-color: #D8093A;
  color: #ffffff;
}

.__select__content {
  position: absolute;
  top: 50px;
  left: 3px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 6px);
  background: #FFFFFF;
  border: 1px solid #30A7FE;
  box-sizing: border-box;
  border-radius: 16px;
  transition: all 0.3s ease-out;
  opacity: 0;
  z-index: 8;
}

.__select__input {
  display: none;
}
.__select__input:checked + label {
  background: rgba(48, 167, 254, 0.3);
  border-radius: 10px;
  margin: 0 auto;
  width: 97%;
}
.__select__input:disabled + label {
  opacity: 0.6;
  pointer-events: none;
}

.__select__label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  max-height: 0;
  padding: 0 16px;
  transition: all 0.2s ease-out;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 1px;
  color: rgba(12, 45, 69, 0.8);
}
.__select__label + input + .__select__label {
  border-top: 0 solid #C7CCD160;
}
.__select__label:hover {
  background: rgba(48, 167, 254, 0.3);
  border-radius: 10px;
  margin: auto;
  width: 97%;
}

3. И последнее нам нужно вставить js код в наш файл где все скрипты

const selectSingle = document.querySelector('.__select');
const selectSingle_title = selectSingle.querySelector('.__select__title');
const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');

// Toggle menu
selectSingle_title.addEventListener('click', () => {
  if ('active' === selectSingle.getAttribute('data-state')) {
    selectSingle.setAttribute('data-state', '');
  } else {
    selectSingle.setAttribute('data-state', 'active');
  }
});

// Close when click to option
for (let i = 0; i < selectSingle_labels.length; i++) {
  selectSingle_labels[i].addEventListener('click', (evt) => {
    selectSingle_title.textContent = evt.target.textContent;
    selectSingle.setAttribute('data-state', '');
  });
}

// Reset title
const reset = document.querySelector('.reset');
reset.addEventListener('click', () => {
  selectSingle_title.textContent = selectSingle_title.getAttribute('data-default');
});

Смотрим что получается у нас:

Именно то что нам нужно. Вот так не сложным способом можно стилизовать select и option.

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

Максим Борисенко

Веб-разработчик
Основатель MAKBORI

Блог Максима Борисенко - разработка и продвижение сайтов
Добавить комментарий