在选择选项上自定义引导表单控件

Posted 2023-03-05

【中文标题】在选择选项上自定义引导表单控件

【英文标题】：customizing bootstrap form-control on select option

【发布时间】：2019-10-13 18:48:37

【问题描述】：

我正在使用引导程序的表单控件类来保持表单输入和需要选择选项的表单输入之间的风格一致。然而，在选择元素上使用引导程序的表单控件会使其在 firefox 中出现丑陋的下拉按钮。

我想要实现的是这个

但是通过 css 部分，我无法确定应该覆盖哪个部分，因为似乎没有 css 指定下拉箭头的装饰。

这是当前代码的样子

<div class="form-group row">
    <label for="industry" class="">Industry :</label>
    <select name="industry" class="form-control">
        <option value="" disabled selected>Select Industry</option>
        <option value="financial-service">Financial Services</option>
        <option value="healthcare-lifescience">Healthcare & Life Science</option>
        <option value="communications">Communications</option>
    </select>
</div>

【参考方案1】：

签出-moz-appearancehere并将其设置为none。

默认情况下，Chrome、Firefox 等浏览器...将样式应用于输入、选择、下拉列表等。使用外观允许您删除此默认样式并使用伪元素应用您自己的样式（已在 Bootstrap 中完成）你的具体情况）。

【参考方案2】：

您可以在其中实现 Chosen（用于选择的 jQuery 插件）。它有很多功能，您可以轻松设计它。

链接：https://harvesthq.github.io/chosen/

在您的代码中：

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css"
  />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
  <div class="form-group">
    <label for="industry" class="">Industry :</label>
    <select name="industry" id="industry" class="form-control chosen-select">
      <option value="" disabled selected>Select Industry</option>
      <option value="financial-service">Financial Services</option>
      <option value="healthcare-lifescience">Healthcare & Life Science</option>
      <option value="communications">Communications</option>
    </select>
  </div>
  <script>
    $("#industry").chosen();
  </script>

【参考方案3】：

查找引导程序的自定义选择类，因为它使您可以更轻松地根据需要设置选择元素的样式。

但需要注意的是，对选择/选项样式的支持相当有限。如果您想要完全控制，则需要使用第三方包将选择转换为基于自定义 html/javascript 的选择。

【参考方案4】：

为您检查我的笔。它 100% 在 chrome、firefox、edge 和 safari 中工作

check this codepen

select.customDropdown::-ms-expand 
    display: none;


select.customDropdown 
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    
    background : url("https://img.icons8.com/material/24/000000/sort-down.png") no-repeat right #fff;

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<div class="jumbotron container">
  <div class="row">
  <div class="col-md-6 offset-md-3">
<div class="form-group row">
    <label for="industry" class="">Industry :</label>
    <select name="industry" class="form-control customDropdown">
        <option value="" disabled selected>Select Industry</option>
        <option value="financial-service">Financial Services</option>
        <option value="healthcare-lifescience">Healthcare & Life Science</option>
        <option value="communications">Communications</option>
    </select>
</div>
  </div>
  </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.js"></script>