Question

我读了很多这样的问题，我找到了很多解决方案，但没有一个能为我工作......

我想要什么？我想要一个默认选项为黑色的下拉菜单，但其他红色，所以我可以看到我什么时候改变了什么。我可以使用javascript onchange，但我更喜欢使用内联CSS。

为简单起见，我们从代码html开始：

  <p>Title:
    <select id='myid'>
      <option value="Myoption1" selected>Option 1</option>
      <option value="Myoption2"><span style="color: 'red';">Option 2</span></option>
      <option value="Myoption3" style="color: 'red';">Option 3</option>
    </select>
  </p>

既不工作：文字保持黑色。

实际上我的下拉列表是由javascript生成的，所以代码更复杂，但我认为问题出在这里。

编辑它也不起作用（有或没有';'）：

  <p>Title:
    <select id='myid'>
      <option value="Myoption1" selected>Option 1</option>
      <option value="Myoption2" style="color:#FFF000;">Option 2</option>
      <option value="Myoption3" style="color:red;">Option 3</option>
    </select>
  </p>

Answer 1

删除引号

＆＃13;

<p>Title:
    <select id='myid'>
      <option value="Myoption1" selected>Option 1</option>
      <option value="Myoption2" style="color: red;">Option 2</option>
      <option value="Myoption3" style="color: red;">Option 3</option>
    </select>
  </p>

＆＃13;

虽然，更好的做法是使用CSS

＆＃13;

option:not(:first-child) {
   color: red;
}

＆＃13;

<p>Title:
  <select id='myid'>
    <option value="Myoption1" selected>Option 1</option>
    <option value="Myoption2">Option 2</option>
    <option value="Myoption3">Option 3</option>
  </select>
</p>

＆＃13;

这看起来更清晰，并提供了关注点分离。

Answer 2

我可以看到你的风格格式有一些错误的值，它是倒置的昏迷或类似的东西。我认为您的代码应该是style="color:red;"

Answer 3

你必须做两件事

从 <span> 标记中删除 <option> 标记，该标记无效

即，您需要将<option><span></span></option>替换为 <option><option>

从您的颜色属性中删除单引号（'），它也将无效。

即，你需要用颜色替换颜色：'red'：红色

option{
  color:red;
  }

<p>Title:
    <select id='myid'>
      <option value="Myoption1" selected>Option 1</option>
      <option value="Myoption2">Option 2</option>
      <option value="Myoption3">Option 3</option>
    </select>
  </p>

样式：颜色不适用于选项

3 个答案: