如何删除 bootstrap 4 中的输入组 <select> 箭头?
How to remove input-group <select> arrow in bootstrap 4?
如何删除 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>
图片:
我尝试了这些解决方案:
- 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
但不起作用。
将css更改为:
.custom-select{
background:#fff;
}
将此添加到您的 CSS 文件中:
.custom-select {
background: none;
}
如果您只想删除箭头,您应该为 custom-select
class 强制应用背景样式,因为这些箭头已设置为背景。试试下面的代码作为参考。
.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>
希望对您有所帮助
如上所述,最好使用 background-image:none。我添加了字段以便您可以看到效果。
确保调整内边距以减少分配给下拉箭头的白色space,否则文本会被裁剪成看似空的space。
.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>
如何删除 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>
图片:
我尝试了这些解决方案:
- 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
但不起作用。
将css更改为:
.custom-select{
background:#fff;
}
将此添加到您的 CSS 文件中:
.custom-select {
background: none;
}
如果您只想删除箭头,您应该为 custom-select
class 强制应用背景样式,因为这些箭头已设置为背景。试试下面的代码作为参考。
.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>
希望对您有所帮助
如上所述,最好使用 background-image:none。我添加了字段以便您可以看到效果。
确保调整内边距以减少分配给下拉箭头的白色space,否则文本会被裁剪成看似空的space。
.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>