样式选项标签

Question

我有一个包含选项的下拉菜单。我想部分中断和加粗一些文本以及插入上下文中断。我尝试使用 CSS 以及 HTML 标签，但我无法得到它。有人可以提出解决方案吗？ 提前致谢

Answer 1

我知道这个问题有点老了（或者至少不是新问题），但我想展示一种非常简单的方法来模拟选择元素，而不是像 How to style the option of a html “select”? 中建议的那样使用“替换插件”。

可能有很多很多方法可以做到这一点，但我尽量让事情变得非常简单，所以我的模拟方法只使用 CSS。它相当简单，但我想指出，这并不是一件复杂的事情，因此您可能不需要插件来完成它。

注意1：我没有使用<option>，而是使用了<label>。由于<label> 是一个交互式元素，因此在其中放入一些交互式元素（如<button>）可能会搞砸。无论如何，选项通常都是非交互式的，但请注意，这种简单的模拟并不能做任何事情。

注意2：如果您希望能够选择多个选项，只需搜索“radio”并替换为“checkbox”即可。

---

Emulating Select Using Radio - No Collapse

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  background-color: black;
  color: #28AADC;
}

/* none functional styles.  just regular styling */
.radio_select {
  background-color: #28AADC;
  display: inline-block;
}

<div class="radio_select">
  <div>
    <input id="rad1" type="radio" name="radio_select" />
    <label for="rad1">Option 1</label>
  </div>

  <div>
    <input id="rad2" type="radio" name="radio_select" checked="checked" />
    <label for="rad2">Option 2</label>
  </div>
  
  <div>
    <input id="rad3" type="radio" name="radio_select" />
    <label for="rad3">Option 3</label>
  </div>
</div>

---

Radio select emulation - with collapse

注意：这不适用于移动设备，因为它使用:hover。

input[type="radio"] {
  display: none;
}

/* style this to your heart's content */

input[type="radio"] + label {
  display: none;
}

input[type="radio"]:checked + label {
  background-color: black;
  color: #28AADC;
  display: inline-block;
}

.radio_select:hover label {
  display: inline-block;
}


/* none functional styles.  just regular styling */

.radio_select {
  background-color: #28AADC;
  display: inline-block;
}

<!-- NOTE:  This technique uses hover, so it won't work for mobile devices.
  I couldn't think of a pure CSS way to solve that.  Sorry. -->

<div class="radio_select">
  <div>
    <input id="rad1" type="radio" name="radio_select" />
    <label for="rad1">Option 1</label>
  </div>

  <div>
    <input id="rad2" type="radio" name="radio_select" />
    <label for="rad2">Option 2</label>
  </div>

  <div>
    <input id="rad3" type="radio" name="radio_select" checked="checked" />
    <label for="rad3">Option 3</label>
  </div>
</div>