样式选项标签

Question

我有一个包含选项的下拉列表.我想部分打破和加粗一些文本以及插入上下文中断.我尝试使用CSS以及HTML标签,但我无法得到它.有人可以建议一个解决方案？提前致谢

Answer 1

我知道这个问题有点旧(或者至少不是新的),但是我想展示一种非常简单的方法来模拟选择元素而不是使用"替换插件",如" 如何设置选项样式"中所示. HTML"选择"？.

可能有很多,很多方法可以做到这一点,但我尽量保持简单,所以我的模拟方法只使用CSS.它是相当简单的骨头,但我想指出这样做并不复杂,你可能不需要插件来做它.

注1:<option>我用过而不是使用<label>.因为<label>是一个交互式元素,所以在内部放置一些交互式内容(比如a <button>)可能会搞砸它.无论如何,选项通常都是非交互式的,但请注意,这种简单的仿真无法完成所有操作.

注意2:如果您希望能够选择多个选项,只需搜索"radio"并替换为"checkbox".

使用无线电模拟选择 - 无崩溃

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>

无线电选择仿真 - 崩溃

注意:这不适用于移动设备,因为它使用: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>