在下拉菜單中更改第一個選定選項的顏色

Question

我試圖更改第一個選擇的顏色，並讓選擇選項的其餘部分保留在其黑色的繼承顏色中。

但是，我無法得到它。目前;所有的顏色都在#ccc中。我想要禁用的第一個選項是#ccc，其餘的是繼承顏色。

這裏的HTML：

<select class="form-control select form__blank"> 
    <option disabled selected value> - select - </option> 
    <option>Full Furnished</option> 
    <option>Semi Furnished</option> 
    <option>UnFurnished</option> 
</select> 

CSS：

.form-control { 
    border-radius: 25px; 
    border: 1px solid #323a56; 
    width: 100%; 
    padding: 10px 15px; 
    font-size: 14px; 
} 
.select { 
    border-radius: 25px; 
    border: 1px solid #323a56; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    background-position: right 50%; 
    background-repeat: no-repeat; 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); 
    height: inherit; 
} 
.form__blank:first-child { 
    color: #ccc; 
} 

的jsfiddle：https://jsfiddle.net/v9gasouf/

希望這是有道理的。

Answer 1

你不應該做

.form__blank:first-child { 
    color: #ccc; 
} 

而是：

.form__blank option:first-child { 
    color: #ccc; 
} 

Answer 2

選擇選項的第一個孩子，而不是選擇。

option:first-child { 
color: #ccc; 
} 

Answer 3

關於這個主要問題是造型options/select它是一個非常艱鉅的任務，因爲每個瀏覽器的行爲不同，或者使用不同的方式來顯示它們。

你有一個StackOverflow question有一個很好的解釋爲什麼和很多可能的解決方法。

使用Chrome v.57.0.2987你可以使用CSS選擇器：select option:disabled，並會做的工作：

.form-control { 
 
    border-radius: 25px; 
 
    border: 1px solid #323a56; 
 
    width: 100%; 
 
    padding: 10px 15px; 
 
    font-size: 14px; 
 
} 
 
.select { 
 
    border-radius: 25px; 
 
    border: 1px solid #323a56; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    background-position: right 50%; 
 
    background-repeat: no-repeat; 
 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); 
 
    height: inherit; 
 
} 
 
.form__blank select option:disabled { 
 
    color: #ccc; 
 
}

<select class="form-control select form__blank"> 
 
    <option disabled selected value> - select - </option> 
 
    <option>Full Furnished</option> 
 
    <option>Semi Furnished</option> 
 
    <option>UnFurnished</option> 
 
</select>

Answer 4

而是造型:first-child您可以使用樣式屬性[disabled]

select option:disabled{ 
    color:red; 
} 

您還可以查看下面的小提琴示例。

https://jsfiddle.net/achuakshuu/e97nqLuh/

Answer 5

嘗試這樣

<select id="selid" class="form-control select form__blank"> 
..... 
</select> 

JS（JQuery的）

$('#selid').change(function() { 
$(this).find('option').css('color', 'inherit'); 
$(this).find('option:selected').css('color', 'red'); 
}).trigger('change'); 

或

$('#selid').change(function() { 
$(this).css("color", $("option").css("color", 'inherit')); 
$(this).css("color", $("option:selected").css("color", 'blue')); 
}).trigger('change');