如何设置selectpicker选项下划线仅显示在文本下方且保持全宽可点击

这个需求我之前处理过，直接给<option>加border-bottom确实会撑满整个选项宽度，完全不符合只在文字下方显示下划线的要求。试试下面这个方案，既能实现文字专属下划线，又能保留选项全宽可点击的特性：

步骤1：修改HTML结构，用行内元素包裹选项文本 #

把每个选项里的文字放进<span>标签中，这样我们就能单独给文本设置样式，而不影响整个<option>的宽度：

<select class="selectpicker" multiple data-live-search="true" name="color[]" title="موردی انتخاب نشده">
  <option value="">
    <span style="border-bottom:2px solid red;">قرمز</span>
  </option>
  <option value="">
    <span style="border-bottom:2px solid black;">مشکی</span>
  </option>
  <option value="">
    <span style="border-bottom:2px solid white;">سفید</span>
  </option>
</select>

步骤2：（可选）换成外部CSS，让代码更整洁 #

如果觉得内联样式太杂乱，可以把样式抽出来写在CSS文件里：

/* 通用文本下划线样式 */
.color-text {
  border-bottom: 2px solid;
}
/* 不同颜色的下划线 */
.color-text.red {
  border-color: red;
}
.color-text.black {
  border-color: black;
}
.color-text.white {
  border-color: white;
}

对应的HTML改成：

<select class="selectpicker" multiple data-live-search="true" name="color[]" title="موردی انتخاب نشده">
  <option value="">
    <span class="color-text red">قرمز</span>
  </option>
  <option value="">
    <span class="color-text black">مشکی</span>
  </option>
  <option value="">
    <span class="color-text white">سفید</span>
  </option>
</select>

原理说明 #

<span>是行内元素，它的宽度只会严格包裹内部的文本内容，所以设置的border-bottom只会出现在文字下方，不会延伸到整个选项宽度。而<option>本身依然保持全宽状态，完全不影响用户点击选择的区域。

如果使用bootstrap-select渲染后样式有冲突，可以用更具体的CSS选择器提升优先级：

.bootstrap-select .dropdown-menu li a span.color-text {
  border-bottom: 2px solid;
}

内容的提问来源于stack exchange，提问作者Hassan