如何在引导程序 4 中删除输入组 <select> 箭头?
Posted
技术标签:
【中文标题】如何在引导程序 4 中删除输入组 <select> 箭头?【英文标题】:How to remove input-group <select> arrow in bootstrap 4? 【发布时间】:2018-08-21 02:03:39 【问题描述】:如何删除 select 中那个可怕的双箭头? 我发现的关于这篇文章的任何其他回答都不起作用。
<div class="form-group">
<label for="date">Date</label>
<div class"row">
<div class="col-5">
<input.....>
</div>
<div class="col-7">
<div class="input-group">
<select class="custom-select">
<option.....>
</select>
</div>
</div>
</div>
</div>
图片:
我尝试了这些解决方案:
How to remove the arrow in dropdown in Bootstrap 4? Remove arrows from form element select in Bootstrap 3 Select removing dropdown arrow How to replace arrow dropdown select in boostrap Change color and appearance of drop down arrow但不起作用。
【问题讨论】:
【参考方案1】:如果您只是想删除箭头,则应强制为 custom-select
类应用背景样式,因为这些箭头已设置为背景。试试下面的代码作为参考。
.custom-select
background: none !important;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="date">Date</label>
<div class"row">
<div class="col-5">
<input.....>
</div>
<div class="col-7">
<div class="input-group">
<select class="custom-select">
<option.....>
</select>
</div>
</div>
</div>
</div>
希望对你有帮助
【讨论】:
感谢您的回答。我什至不知道那些箭头是select的背景。您的解决方案有效。 很高兴它有帮助。接受它作为答案,以便它可以帮助其他人。 background: none 也会移除颜色。使用背景图像:无;这样它就不会反映背景颜色。【参考方案2】:将此添加到您的 CSS 文件中:
.custom-select
background: none;
【讨论】:
【参考方案3】:把css改成:
.custom-select
background:#fff;
【讨论】:
【参考方案4】:如上所述,最好使用 background-image: none。我添加了字段,以便您查看效果。
确保调整填充以减少为下拉箭头分配的空白,否则文本将剪辑在看似空白的空间中。
.custom-select
background-image: none !important;
padding-left: 10px !important;
padding-right: 10px !important;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="date">Date</label>
<div class"row">
<div class="col-3">
<input type="text" placeholder="some text">
</div>
<div class="col-10">
<div class="input-group">
<select class="custom-select">
<option>Sample text</option>
<option>Second text</option>
</select>
</div>
</div>
</div>
</div>
【讨论】:
以上是关于如何在引导程序 4 中删除输入组 <select> 箭头?的主要内容,如果未能解决你的问题,请参考以下文章