选项标签的样式选项

Question

选项标签的样式选项

cssdrop-down-menu

5

我有一个包含选项的下拉菜单。我想部分打断和加粗一些文本，并插入上下文打破。我尝试使用CSS以及HTML标签，但无法实现。请问有什么解决方案吗？谢谢！

- Sachin Chaudhari

1

可能是如何为HTML“select”样式选项？的重复问题。 - Shaggy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- UndoingTech · Accepted Answer

我知道这个问题有点旧（或者至少不是新问题），但是我想展示一种非常简单的方法来模拟选择元素，而不是使用“替换插件”，如如何样式化html“select”的选项？中建议的那样。

可能有很多很多种方法来做到这一点，但是我试图保持事情极其简单，所以我的模拟方法只使用CSS。它相当基础，但我想指出的是，这并不是一件复杂的事情，因此您可能不需要插件来完成它。

注1：我使用了<label>而不是<option>。由于<label>是一个交互式元素，将交互式元素放在里面（比如<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>