样式选项标签 [英] Styling option tags

问题描述

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

I have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution? Thanks in advance

推荐答案

我知道这个问题有点老'd喜欢显示一个非常简单的方式来模拟一个选择元素，而不是使用一个替换插件建议在如何设置htmlselect的选项样式？。

I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html "select"?.

做到这一点，但我尝试保持东西非常简单，所以我的模拟方法只使用CSS。这是相当裸的骨头，但我想指出，这不是一个复杂的事情，所以你可能不需要一个插件来做。

There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.

注1：我使用了< label> ，而不是使用< option> 。由于< label> 是一个交互式元素，所以放入内部交互内容（如< button> 搞砸了。

Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.

注意2：如果您想要使用此选项，可以选择多个选项，只需搜索radio并替换为checkbox即可。

Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "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 。

Note: this won't work for mobile devices since it uses :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>

这篇关于样式选项标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！