关键词：
【中文标题】在选择选项上自定义引导表单控件【英文标题】：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>【讨论】：
在 Android 4 上自定义 ActionBar 选项卡
】在Android4上自定义ActionBar选项卡【英文标题】：CustomizingActionBarTabsonAndroid4【发布时间】：2012-05-0314:35:49【问题描述】：我正在尝试自定义ActionBar上的选项卡。我只想将标签与手机屏幕对齐，并使其可伸缩以适应各种屏幕。但我... 查看详情
选择表单控件在 Angular 7 中返回 [object Object]
】选择表单控件在Angular7中返回[objectObject]【英文标题】：SelectFormControlreturns[objectObject]inAngular7【发布时间】：2019-06-1022:24:01【问题描述】：在我的Angular7项目中，我有一个带有select和*ngFor块的响应式表单。ngFor值是基于从选项中... 查看详情
Xamarin 表单 - 如何在 TabbedView (iOS) 上自定义 VoiceOver
】Xamarin表单-如何在TabbedView(iOS)上自定义VoiceOver【英文标题】：XamarinForms-HowcanIcustomizeVoiceOveronTabbedView(iOS)【发布时间】：2021-10-0108:33:53【问题描述】：我有一个简单的TabbedView，底部有三个标签图标，在iOS中显示得很好。但是，... 查看详情
如何在 xamarin 表单中刷新选择器控件的 UI
】如何在xamarin表单中刷新选择器控件的UI【英文标题】：HowtorefreshUIofapickercontrolinxamarinforms【发布时间】：2018-12-2613:05:15【问题描述】：我有3个选择器控件，我正在尝试将一个列表绑定到所有3个选择器控件。如果在第一个选择... 查看详情
在 Microsoft Access 数据表上自定义自动完成功能
】在MicrosoftAccess数据表上自定义自动完成功能【英文标题】：Customizeauto-completefunctionalityonMicrosoftAccessdatasheet【发布时间】：2017-06-2220:24:24【问题描述】：我有一个绑定到用户记录的主表单，还有一个绑定到用户“拥有”的多个... 查看详情
请教关于wpf上自定义控件添加事件的问题
在xmal的控件属性中直接双击事件，会自动生成事件。参考技术A你是想自己加事件吗？用以下代码试试：//用于定义事件pubiceventEventHandler<EventArgs>StartAEvent;//用于触发事件privatevoidOnStartAEvent()varhandler=StartAEvent;if(handler!=null)handle... 查看详情
在 iOS 7 WebView 上的 HTML 输入控件中选择文本时如何删除或禁用“定义”选项？
】在iOS7WebView上的HTML输入控件中选择文本时如何删除或禁用“定义”选项？【英文标题】：Howtoremoveordisable"Define"optionwhenselectingtextinanHTMLinputcontrolonaniOS7WebView?【发布时间】：2014-01-1422:55:23【问题描述】：我有一个简单的... 查看详情
引导日期选择器的覆盖选项
】引导日期选择器的覆盖选项【英文标题】：Overwriteoptionsforbootstrapdatepicker【发布时间】：2016-06-1109:13:06【问题描述】：我已经在一个js文件中为我网站的所有日期选择器定义了一个通用选项，现在我试图通过id更新/覆盖特定字... 查看详情
带有手动触发和选择器选项的引导工具提示
】带有手动触发和选择器选项的引导工具提示【英文标题】：BootstrapTooltipwithmanualtriggerandselectoroption【发布时间】：2014-09-1808:15:46【问题描述】：我有一个动态表，加载了ajax。当我将鼠标悬停在row上时，我想显示一个工具提示，... 查看详情
iOS：最适合从两个选项中进行选择的控件
】iOS：最适合从两个选项中进行选择的控件【英文标题】：iOS:Mostsuitablecontrolforselectingfromtwooptions【发布时间】：2012-03-2302:56:54【问题描述】：我正在开发一个iOS应用程序，其中我需要一个UIControl，它允许用户在2个选项和仅2个选... 查看详情
Angular 2 - 自定义表单控件 - 禁用
...建了一个自定义控件，该控件由input[type=text]和一个日期选择器组成。当我在模板驱动的表单中使用它时，一切正常。但是当我使用模型驱动的方法（反应式表单）时，表单控件上的disable()方法似乎 查看详情
基于单选按钮选择的访问选项卡控件
】基于单选按钮选择的访问选项卡控件【英文标题】：AccessTabControlbasedonRadioButtonSelection【发布时间】：2017-03-2816:22:42【问题描述】：我在Access工作。我有一个表单，用户可以从列表中以单选按钮的形式选择“方法”。根据他们... 查看详情
选择选项：jQuery、Case 和显示/隐藏表单字段
】选择选项：jQuery、Case和显示/隐藏表单字段【英文标题】：Selectoptions:jQuery,Caseandshow/hideformfields【发布时间】：2011-12-0302:27:26【问题描述】：根据选择控件的值显示/隐藏表单字段的最有效方法是什么？我有一个选择控件和三个... 查看详情
如何使用 jQuery Validate 正确验证放置在多个选项卡上的 Twitter 引导表单？
】如何使用jQueryValidate正确验证放置在多个选项卡上的Twitter引导表单？【英文标题】：HowtoproperlyvalidateTwitter\'sBootstrapformplacedonseveraltabswithjQueryValidate?【发布时间】：2012-04-2601:42:56【问题描述】：我在几个Twitter的Bootstrap选项卡上... 查看详情
引导选择中的选项值显示在下拉列表之外
】引导选择中的选项值显示在下拉列表之外【英文标题】：optionvaluesinbootstrapselectaredisplayedoutsidethedropdown【发布时间】：2018-04-1720:44:29【问题描述】：我有时在我的html页面中遇到问题，其中引导选择中的所有选项都显示在下拉框... 查看详情
引导选项卡：表单的下一个和上一个按钮
】引导选项卡：表单的下一个和上一个按钮【英文标题】：BootstrapTabs:Next&PreviousButtonsforForms【发布时间】：2014-04-1310:13:44【问题描述】：我正在尝试（最终）将表单拆分为多个Bootstrap3.x选项卡，但我在使用上一个和下一个按... 查看详情
使用 django 和引导类创建单选表单的问题
...问题描述】：我正在尝试使用Django创建一个带有单选按钮选项的表单。该网站是在bootstrap4中设计的，由于某种原因，应用自定义控件输入类时按钮消失了。我从一个完美呈现的静态模板开始。这些按钮组的代码如下： 查看详情
在引导选项卡中选择 2 挤压下拉列表
】在引导选项卡中选择2挤压下拉列表【英文标题】：Select2squishingdropdownslistsinbootstraptabs【发布时间】：2016-09-2000:26:12【问题描述】：我正在使用引导选项卡并正在使用select2插件（可搜索的下拉列表）我有多个选项卡，但出于某... 查看详情