Source:
https://html.ildar-meyker.ru/html-gosha/components.html?tab=tab-selects
Демо:
https://codepen.io/ildar-meyker/pen/eYXMvaG
Плагины:
https://kvlsrg.github.io/jquery-custom-select/
Подключение:
//
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-custom-select@1.6.4/dist/js/jquery.custom-select.min.js"></script>
Разметка:
//
<select class="select-underline" data-placeholder="SUBJECT">
<option>SUBJECT SUBJECT 1</option>
<option>SUBJECT SUBJECT 2</option>
<option>SUBJECT SUBJECT 3</option>
</select>
Стили:
// blocks/selects/select-underline.scss
.select-underline {
position: relative;
display: inline-block;
&--active {
.select-underline__option--value {
}
.select-underline__option--value:after {
transform: translateY(-50%) scaleY(1);
}
}
&--dropup {
.select-underline__dropdown {
top: auto;
bottom: 100%;
}
}
&__option {
@include reset-btn;
display: block;
width: 100%;
text-transform: uppercase;
font-size: 1.2rem;
font-weight: 400;
line-height: 1.2;
text-align: left;
padding: 1rem 0;
white-space: nowrap;
&--value {
border: 1px solid #101010;
border-width: 1px 0;
border-top-color: transparent;
padding: 1.7rem 0;
padding-right: 2.5rem;
&:after {
content: " ";
position: absolute;
top: 50%;
transform: translateY(-50%) scaleY(-1);
right: 0;
width: 1rem;
height: 1rem;
background: url(../img/icons/general/arrow-up.svg) no-repeat 50%
50% / contain;
}
}
}
&__dropdown {
transform: translateX(-2rem);
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
background: #fff;
padding: 1rem 2rem;
z-index: 10;
.select-underline__option {
&:hover {
color: #878787;
}
}
}
&__placeholder {
color: #b7b7b7;
}
}
@media (min-width: 1000px) {
.select-underline {
&__option {
font-size: 1.4rem;
}
}
}
Инициализация:
// modules/select-underline.js
$(function () {
const namespace = "select-underline";
$(`.${namespace}`).each(function () {
const { placeholder } = $(this).data();
$(this).customSelect({
placeholder: `<span class="${namespace}__placeholder">${placeholder}</span>`,
block: namespace,
});
});
});
0 комментариев