Поле с выпадающим списком select. Изменить цвет текста выделенного option

444

26 ноября 2016, 18:44

Добрый день, друзья!
Имеется поле со списком 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>

Answer 1

По-моему, обесцвечивание у вас уже работает. Только не забудьте поправить цвет option, чтобы они оставались насыщенными:

option {
    color: #000;
}

К сожалению, вернуть цвет через CSS, похоже, нельзя, но можно сделать как-то так:

<select onchange="this.setAttribute('data-selected', true)">
    <option disabled selected hidden>Choose you hypervisor...</option>
    <option>1</option>
    <option>2</option>
</select>