html - 如何更改选择列表第一个选项的颜色

Question

我无法设置所选下拉列表的第一个选项颜色。当我们为“选择”应用颜色时，所有选项都会发生变化。如何只更改第一个选项？

我的代码:

#step3-drpdwn {
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 25px;
    height: 34px;
    color: #ccc;
}
#step3-drpdwn>option:not(:first-child) {
    color: #000;
}
#step3-drpdwn>option:first-hand {
    color: #ccc;
}

<select class="btn btn-md" id="step3-drpdwn">
	<option disabled selected>
		Your Designation or Role in the Company
	</option>
	<option>
		Chairman
	</option>
	<option>
		President
	</option>
	<option>
		CEO
	</option>
	<option>
		Director
	</option>
	<option>
		Proprietor
	</option>
</select>

Answer 1

根据我对您评论的理解，我认为这就是您想要的
HTML

 <select class="btn btn-md" id="step3-drpdwn" onchange="setColor(this);">
        <option disabled selected>
            Your Designation or Role in the Company
        </option>
        <option>
            Chairman
        </option>
        <option>
            President
        </option>
        <option>
            CEO
        </option>
        <option>
            Director
        </option>
        <option>
            Proprietor
        </option>
    </select>

和JS

function setColor(dropdown){
    dropdown.style.color = "black";
};

或者如果您使用JQuery

$(document).ready(function(){
    $("#step3-drpdwn").on("change", function(){
        $(this).css("color", "#000");
    });
});

这是 fiddle https://fiddle.jshell.net/qyLgorm8/1/ (取消注释 HTML/JS 以查看纯 JS 的使用)

希望对你有帮助