如何將背景顏色應用於選擇標簽中的僅選定選項

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 。