Question

我无法使所选的下拉列表成为第一个选项颜色。当我们应用颜色选择＆＃39;时，所有选项都会发生变化。如何只更改第一个选项？

我的代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

在下面添加CSS：

select#step3-drpdwn option:first-child{
  background: #ccc;
  color: red;
}

Answer 2

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

null

和 JS

 <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>

或者如果您使用 JQuery

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

这是小提琴https://fiddle.jshell.net/qyLgorm8/1/（取消注释HTML / JS以查看使用纯JS）

希望有所帮助

Answer 3

这可能适合你。试试这个：

$('#step3-drpdwn').change(function () {
    $('#step3-drpdwn').css("background", $("select option:selected").css("red"));
});

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

3 个答案: