Question

我有这个：

  <select style="font-size: 20" id="subject" name="subject">
     <option hidden value="hello">I just want to say hello =]</option>
     <option value="quote">I'd like a quote</option>  
     <option value="general">General</option>   
  </select>

到目前为止工作，但我希望hello选项为灰色选择（如textareas中的占位符）

如果我这样做：

  <select style="font-size: 20" id="subject" name="subject">
     <option hidden style="color:gray" value="hello">I just want to say hello =]</option>
     <option value="quote">I'd like a quote</option>  
     <option value="general">General</option>   
  </select>

它只会在下拉时改变“hello”的颜色，而不会改变实际的选择元素

Answer 1

无法评论：禁用???

＆＃13;

<select style="font-size: 20" id="subject" name="subject">
  <option value="hello" disabled selected>I just want to say hello =]</option>
  <option value="quote">I'd like a quote</option>
  <option value="general">General</option>
</select>
<select style="font-size: 20;" id="subject" name="subject">
  <option value="hello" disabled selected>I just want to say hello =]</option>
  <option value="quote">I'd like a quote</option>
  <option value="general">General</option>
</select>

＆＃13;

Answer 2

这是什么意思？这将使所选选项变为灰色。

select {
    color: grey;
}
option:not(:checked) {
    color: black; /* or whatever your default style is */
}

http://jsfiddle.net/6reh1ptd/

参考：https://stackoverflow.com/a/8619489/1585362

更改隐藏选择选项的颜色

2 个答案: