在 select 选项上自定义 bootstrap 表单控件
customizing bootstrap form-control on select option
我正在使用 bootstrap 的表单控件 class 来使我的表单输入与需要 select 选项的表单输入保持一致的样式。但是,在 select 元素上使用 bootstrap 的表单控件会使它在 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>
查看 -moz-appearance
here 并将其设置为 none
。
默认情况下,Chrome、Firefox 等浏览器...将样式应用到输入、选择、下拉列表等。使用外观允许您删除此默认样式并使用伪元素应用您自己的样式(在您的特定情况下已在 Bootstrap 中完成)。
你可以在其中实现 Chosen(jQuery plugin for select)。它有很多功能,而且你可以很容易地设计它。
Link: 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>
查找 custom-select class 以获得 bootstrap,因为它使您可以更轻松地根据需要设置 select 元素的样式。
但是需要注意的是,对 select/options 样式的支持相当有限。如果您想要完全控制,则需要使用 third-party 包将 select 转换为基于 select.
的自定义 html/javascript
为您检查我的笔。它是 100% 在 chrome、firefox、edge 和 safari
中工作
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>
我正在使用 bootstrap 的表单控件 class 来使我的表单输入与需要 select 选项的表单输入保持一致的样式。但是,在 select 元素上使用 bootstrap 的表单控件会使它在 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>
查看 -moz-appearance
here 并将其设置为 none
。
默认情况下,Chrome、Firefox 等浏览器...将样式应用到输入、选择、下拉列表等。使用外观允许您删除此默认样式并使用伪元素应用您自己的样式(在您的特定情况下已在 Bootstrap 中完成)。
你可以在其中实现 Chosen(jQuery plugin for select)。它有很多功能,而且你可以很容易地设计它。
Link: 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>
查找 custom-select class 以获得 bootstrap,因为它使您可以更轻松地根据需要设置 select 元素的样式。
但是需要注意的是,对 select/options 样式的支持相当有限。如果您想要完全控制,则需要使用 third-party 包将 select 转换为基于 select.
的自定义 html/javascript为您检查我的笔。它是 100% 在 chrome、firefox、edge 和 safari
中工作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>