<select> 列表中的粗体文本答案

【问题标题】：bold text in <select> list<select> 列表中的粗体文本
【发布时间】：2014-10-07 15:01:13
【问题描述】：

亲爱的人们，我正在做一个纸牌游戏列表，在某些情况下，我希望第二个名字用粗体显示。

有没有办法做到这一点？我用<b></b>标签试过了，但是没用。

<select>
<option value="90"> Manni </option>
<option value="91"> Manni - Haraldarmanni </option>
<option value="93"> Manni - Hornafjarðarmanni </option>
<option value="94"> Manni - Laugarvatnsmanni </option>
<option value="92"> Manni - Trjámann </option>
</select>

【问题讨论】：

你可以使用 nth-child 选择器来做到这一点：option:nth-child(2) { font-weight:bold; } 不过在 Chrome 中不起作用。
没有。你要么有整个option 粗体，要么没有。为了在select 中包含富文本，您需要一个插件或其他东西来将它们转换为标记和 JS。
@APAD1 不，他不能nth-child 将选择整个<option>。他希望每个<option> 的第二个名称加粗（例如：<option value="91"> Manni - <b>Haraldarmanni</b> </option> 注意：伪代码）。
更新了我的评论，它在 FireFox 中运行良好，但在 Chrome 中却不是那么好。
stackoverflow.com/questions/7208786/…

标签： html select

【解决方案1】：

你问的是不可能的！因为选择元素是由操作系统而不是 HTML 呈现的。 它不能通过 CSS 设置样式。所以你必须考虑替代方案。我想从 <ul> list 和 <li> 选项创建一个下拉列表。所以我在下面创建了这个：http://jsfiddle.net/csdtesting/ks09u3kd/ .现在YES，您可以选择任何风格的任何选项！

使用 UL 和 LI 作为 HTML 选择元素的下拉菜单

(function($, undefined) {
  var open = [];

  var opts = {
    selector: '.dropdown',
    toggle: 'dropdown-toggle',
    open: 'dropdown-open',
    nest: true
  };

  $(document).on('click.dropdown touchstart.dropdown', function(e) {
    // Close the last open dropdown if click is from outside the target dropdown
    if (open.length && (!opts.nest || !open[open.length - 1].find(e.target).length)) {
      open.pop().removeClass(opts.open);
    }

    var $this = $(e.target);

    // If target is a dropdown then toggle it...
    if ($this.hasClass(opts.toggle)) {
      e.preventDefault();

      $this = $this.closest(opts.selector);

      if (!$this.hasClass(opts.open)) {
        open.push($this.addClass(opts.open));
      } else {
        open.pop().removeClass(opts.open);
      }
    }
  });

})(jQuery);

.dropdown {
  float: left;
  position: relative;
  width: 200px;
  padding: 5px;
  margin-right: 10px;
  background: #ccc;
}
.dropdown a {
  display: block;
  text-decoration: none;
  color: #333;
}
ul.dropdown-menu li:nth-child(2) {
  font-weight: bold;
}
/* toggle */

.dropdown .dropdown-toggle {
  padding: 0;
}
/* dropdown */

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ccc;
}
/* options */

.dropdown-menu .option a {
  padding: 5px;
}
.dropdown-menu .option a:hover {
  background-color: #aaa;
}
/* open */

.dropdown-open {
  z-index: 400;
}
.dropdown-open > .dropdown-menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSelect" class="dropdown">
  <a href="#options" class="dropdown-toggle">Manni </a>
  <ul class="dropdown-menu">
    <li class="option"><a href="#">Manni - Haraldarmanni</a>
    </li>
    <li class="option"><a href="#">Manni - Hornafjarðarmanni</a>
    </li>
    <li class="option"><a href="#">Manni - Laugarvatnsmanni</a>
    </li>
    <li class="option"><a href="#">Manni - Trjámann</a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案2】：

如果我们用纯 JS 编写您所要求的代码：FIDDLE

<div id="fakeSelect">
    <div id="selectBox"></div>
    <ul id="selectOptionsBox">
        <li>Manni</li>
        <li>Manni - Haraldarmanni</li>
        <li>Manni - <b>Hornafjarðarmanni</b></li>
        <li>Manni - Laugarvatnsmanni</li>
        <li>Marglita hálfmáninn</li>
        <li>Marglita klukkan</li>
        <li>Marías</li>
        <li>Mausel</li>
        <li>Málverkasafnið</li>
        <li>Mexíkanskur veltipóker</li>
        <li>Miklar hindranir</li>
        <li>Monte Carlo</li>
    </ul>
</div>

#fakeSelect {
    user-select: none;
    -webkit-user-select: none;
}
#selectBox {
    width: calc(200px - 4px);
    border: 1px solid silver;
    padding: 2px;
    cursor: default;
    font: 13px Arial, sans-serif;
    position: relative;
}
#selectBox:hover {
    border: 1px solid gray;
}
#selectBox::after {
    position: absolute;
    content: "▼";
    font-size: .8em;
    right: 5px;
    top: 5px;
}
#selectOptionsBox {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
    border: 1px solid silver;
    border-top: none;
    overflow: auto;
    height: 150px;
    cursor: default;
    font: 13px Arial, sans-serif;
    display: none;
}
#selectOptionsBox li {
    padding: 2px;
}
#selectOptionsBox li:hover {
    background: gainsboro;
}

var selectBox = document.getElementById("selectBox");
var selectOptionsBox = document.getElementById("selectOptionsBox");
var selectOptions = selectOptionsBox.getElementsByTagName("li");

selectBox.innerHTML = selectOptions[0].innerHTML;

selectBox.onclick = function() {
    if (selectOptionsBox.style.display != "block") {
        selectOptionsBox.style.display = "block";
    } else {
        selectOptionsBox.style.display = "none";
    }
}
window.onclick = function(e) {
    if (e.target != selectBox &&
        selectOptionsBox.style.display == "block") {
        selectOptionsBox.style.display = "none";
    }
}

for (var i = 0; i < selectOptions.length; i++) {
    (function(i) {
        selectOptions[i].onclick = function() {
            selectBox.innerHTML = this.innerHTML;
        }
    })(i);
}

【讨论】：