如何将背景颜色应用于选择标签中的仅选定选项

Question

我无法在下拉列表中设置所选选项的背景颜色。 我的工作是：

<select name="Occupancy Status" class="form-control form-control-sm">
    <option style="background-color:#333333" selected>Select your Occupany Status</option>
    <option>bla bla</option>
    <option>bla bla</option>
    <option>bla bla</option>                       
</select>

有没有办法实现所需的输出？ 谢谢你。

Answer 1

CSS 中的:checked伪类最初适用于具有 HTML4 selected和checked属性的元素。 这会从下拉列表中更改所选选项的样式。 此外，如果您想将样式默认为未选择的选项，您可以使用:not()属性。

---

option:not(:checked) {
  /*Your Styling Here*/
}

---

这是一个工作代码：

 option:checked { background-color: #333; color: #fff; }

 <select name="Occupancy Status" class="form-control form-control-sm"> <option selected>Select your Occupany Status</option> <option>bla bla</option> <option>bla bla</option> <option>bla bla</option> </select>

Answer 2

这是你想要的？ 它根本没有经过修饰，只是想看看这是否是您所描述的您无法弄清楚的基本行为。

 .form { height: 50vh; width: 50vw; background: #333; color: #fff; margin: 0 auto; padding: 2rem; } .field-select { border-radius: 5px; background-color: transparent; border-color: rgba(255, 255, 255, 0.25); color: #fff; } .field-select > option { color: initial !important; }

 <div class="form"> <div class="field"> <label>What is your house type? <span>(Required)</span></label> <div> <select class="field-select" aria-required="true" aria-invalid="false"> <option value="" selected="selected" class="field-placeholder">Select</option> <option value="Detached House">Detached House</option> <option value="Semi-Detached House">Semi-Detached House</option> <option value="Mid-Terrace House">Mid-Terrace House</option> <option value="End-Terrace House">End-Terrace House</option> <option value="Detached Bungalow">Detached Bungalow</option> <option value="Semi-Detached Bungalow">Semi-Detached Bungalow</option> <option value="Flat">Flat</option> <option value="Other">Other</option> </select> </div> </div> </div>

点击运行代码片段，或查看我的 CodePen 。