如何为bootstrap select-picker下拉选项中的特定文本设置CSS样式

完全可以实现，核心利用bootstrap-select的data-content属性支持原生HTML标签的特性，操作步骤如下：

步骤1：添加自定义样式 #

先在页面样式里定义动态值的颜色类，方便后续统一维护：

.db-value {
  color: #0d6efd; /* 标准蓝色，可自行调整色值 */
}

步骤2：修改option的data-content配置 #

给所有Eval输出的动态值套上刚才定义的样式类即可，同时注意修正你原代码里option标签的语法错误：原代码中style属性缺少闭合引号，会导致后续data-tokens属性失效。

修改后的完整option代码如下：

<option 
  style="white-space:pre-wrap;max-width: 100%;overflow: hidden;word-wrap: normal !important;"
  data-tokens="<%#Eval("Cust_Name")%>" 
  data-content="Customer Name : <span class='db-value'><%# Eval("Cust_Name")%></span> <br> 
  Location : <span class='db-value'><%# Eval("Loc_name") %></span> <br> 
  Address: <span class='db-value'><%# Eval("Loc_Address") %></span> <br> 
  Contact Person : <span class='db-value'><%# Eval("Loc_ContactP") %></span> <br> 
  Phone No: <span class='db-value'><%# Eval("Loc_Phno") %></span> <br> 
  Email Id : <span class='db-value'><%# Eval("Loc_Email") %></span>"
>
  <%# Eval("Loc_Id")%>
</option>

验证说明 #

修改完成后重新渲染selectpicker即可，表头文字默认继承父级黑色样式，数据库取出的动态值会显示为蓝色，不影响原有的搜索、下拉选择等功能。

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