更改 Vuejs 中选择禁用选项的颜色

【问题标题】：Change color of Select disable option in Vuejs更改 Vuejs 中选择禁用选项的颜色
【发布时间】：2021-04-23 17:38:41
【问题描述】：

我想为 Vuejs 中的选择输入设置占位符

本笔中的示例。 https://codepen.io/halcolo/pen/ZELVVvw

在此示例中，我想更改默认值 Years in service 的颜色（此选择输入的占位符）我正在尝试更改 CSS。

option[value=""][disabled]{
   color: #bebebe
}

但不要改变任何东西，我之后使用了这个，但在这种情况下它不起作用

【问题讨论】：

奇怪的是选择的颜色正在被应用。
这能回答你的问题吗？ How to style the option of an html "select" element?您不能在选择中设置样式选项。和vue没有关系。

标签： css vuejs2

【解决方案1】：

在选择中设置一个ID

<select @change="onChangeEvent(field)" :id="field.label" class="Select" >

用这个 CSS 解锁 select 的外观。

.select .Select{
 -webkit-appearance: none; /* WebKit */
 -moz-appearance: none; /* Mozilla */
 -o-appearance: none; /* Opera */
 -ms-appearance: none; /* Internet Explorer */
 appearance: none; /* CSS3 */
 color:#bbb;
}`

在更改事件上创建一个方法并将其用作选择中的更改

 onChangeEvent(field){
   console.log(field.label)
   document.getElementById(field.label).style.color = "#000000";

对于完整的示例。 https://codepen.io/halcolo/pen/ZELVVvw

【讨论】：