Можно ли выровнять option в select как то ? Что бы окно было статическое например, не выпрыгивало выше селкекта, а например только снизу. Это вообще возможно ?
1
-
1Можно, если не стандартным селектом а плагином каким-нибудь (типа select2 например)– Чад5 мар 2018 в 10:13
Добавить комментарий
|
1 ответ
Стандартный select
очень плохо поддается стилизации, лучше использовать кастомный и уже самому определять направление, анимацию и многое другое. Например div
вместо select
и span
вместо option
.
Или через label
и input type="radio"
:
* {
margin: 0;
padding: 0;
font-family: monospace;
}
/* Selects */
/* General Select */
label.selectGeneral {
display: block;
position: relative;
width: 250px;
height: 40px;
font-size: 18px;
font-weight: normal;
margin: 2px 0;
border: 3px solid #d6d6d6;
border-radius: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label.selectGeneral:before {
content: attr(placeholder);
display: inline-block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
max-width: 100%;
height: 34px;
padding-left: 10px;
text-align: left;
line-height: 34px;
white-space: nowrap;
color: #adadad;
overflow-x: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label.selectGeneral:after {
content: "<>";
display: inline-block;
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
text-align: center;
line-height: 31px;
background-color: #ffffff;
border-bottom: 3px solid #d6d6d6;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
label.selectGeneral label {
display: inline-block;
min-width: 100%;
height: 34px;
font-size: 18px;
font-weight: normal;
line-height: 34px;
white-space: nowrap;
padding: 0 10px;
background-color: #ffffff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label.selectGeneral input,
label.selectGeneral label {
display: none;
}
label.selectGeneral div {
min-width: 100%;
max-height: 500px;
overflow-x: hidden;
}
label.selectGeneral input[type="radio"]:checked~div {
position: absolute;
top: 34px;
z-index: 999;
overflow-y: auto;
box-shadow: -3px 0 0 #d6d6d6, 3px 0 0 #d6d6d6;
border-top: 3px solid #d6d6d6;
border-bottom: 3px solid #d6d6d6;
}
label.selectGeneral input[type="radio"]:checked~div>label,
label.selectGeneral input[type="radio"]:checked+label {
display: block;
}
label.selectGeneral input[type="radio"]:checked~div>label:hover {
background-color: #ffa834;
}
label.selectGeneral input[type="radio"]:not(:checked)~div>input[type="radio"]:checked+label {
position: relative;
z-index: -1;
}
<label class="selectGeneral" placeholder="select your OS...">
<input type="radio" name="OS">
<div>
<input type="radio" name="OS" value="Linux" id="OS[Linux]">
<label for="OS[Linux]">linux</label>
<input type="radio" name="OS" value="Windows" id="OS[Windows]">
<label for="OS[Windows]">windows</label>
<input type="radio" name="OS" value="Other" id="OS[Other]">
<label for="OS[Other]">other</label>
</div>
</label>
-
1
-
почему - вопрос риторический, как - у автора есть возможность редактировать или удалить свое сообщение. 5 мар 2018 в 11:55
-
6если отвечаете, то ответ не должен быть только ссылкой на другой ресурс. как публиковать ответы– Alex5 мар 2018 в 12:00
-
1
-
2Возможно Вы не поняли сути комментариев. Ссылка - это тоже неплохо и Вы правильно ее указали. Но! Для полноценного ответа Вам нужно было перенести важную часть из ссылки в ответ, т.к. ссылка на другом ресурсе может быть недоступной со временем и указать ссылку как источник. В Вашем случае по ссылке вся полезная информация - это рабочий код и именно его Вам и нужно было добавить в свой ответ. Обновили Ваш ответ, посмотрите пожалуйста как он должен выглядеть. Если редакция Вашего ответа Вас не устраивает по какой-либо причине, откатите ее.– Alex6 мар 2018 в 19:09