Добрый день, друзья!
Имеется поле со списком select
. Один option
сделан disabled
(так как поле со списком не имеет placeholder
) и hidden
(чтобы не был виден в списке). Хочу реализовать такую вещь: пока пользователь ничего не выбрал, остается этот как бы "placeholder
" с серым цветом. Когда выбран option
- цвет внутри поля черный.
Маялся и так и так, пришлось еще немного помучаться с кастомной стрелочкой.
Друзья, подскажите, как реализовать?
.form_select {
position: relative;
}
select {
margin-bottom: 30px;
color: #888;
position: relative;
}
select:hover {
cursor: pointer;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.main_sect_right_side select {
padding-right: 18px;
}
}
.form_select::after {
content:'>';
font: 21px "Consolas", monospace;
color:#aaa;
background-color: #dedede;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 5px;
top: 5px;
position: absolute;
pointer-events: none;
width: 30px;
height: 30px;
}
<div class="form_select">
<select>
<option disabled selected hidden>Choose you hypervisor...</option>
<option>1</option>
<option>2</option>
</select>
</div>