twitter-bootstrap 如何编辑选择表单箭头？（引导程序 4）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42363405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to edit the select form arrow? (Bootstrap 4)
提问by devhermluna
I am working on a form with Bootstrap 4 and I would like to edit/change the style of the arrow select element from the first version to the second version as depicted below.
我正在使用 Bootstrap 4 处理表单，我想编辑/更改箭头选择元素的样式，从第一个版本到第二个版本，如下所示。
I tried different ways (as seen in this community citations needed) to edit the arrow but I had no success.
我尝试了不同的方法（如本社区引用需要所示）来编辑箭头，但没有成功。
Could someone help me by explaining how I could achieve the desired result?
有人可以通过解释我如何达到预期的结果来帮助我吗？
Please find bellow an example of my HTML for the problem.
请在下面找到我的 HTML 示例以解决问题。
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Description" name="description">
<meta content="index,follow" name="robots">
<link href="/images/myicon.png" rel="icon" type="image/png">
<title>TITLE HERE</title>
<!--CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</body>
采纳答案by Andreas Gusakov
I have found the answer on the same Bootstrap 4
我在同一个 Bootstrap 4 上找到了答案
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>Link: https://v4-alpha.getbootstrap.com/components/forms/#select-menu
链接：https: //v4-alpha.getbootstrap.com/components/forms/#select-menu
Thank you for the help anyway
无论如何谢谢你的帮助
回答by devhermluna
Just an example. You can use it as reference.
只是一个例子。您可以将其用作参考。
In this example you will learn the way to custom the selectbox. However, in my experience. Old browsers doesn't support this method.
在本例中，您将学习自定义选择框的方法。但是，以我的经验。旧浏览器不支持此方法。
select {
background-image:
linear-gradient(45deg, transparent 50%, red 60%),
linear-gradient(135deg, red 40%, transparent 50%) !important;
background-position:
calc(100% - 30px) 14px,
calc(100% - 20px) 14px,
100% 0;
background-size:
10px 10px,
10px 10px;
background-repeat: no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>Hope it helps!
希望能帮助到你！
回答by Zakaria Acharki
If you could use Select2, the solution will be simple by adding costum class like :
如果您可以使用 Select2，解决方案将很简单，只需添加如下costum 类：
$("#myList").select2({
containerCssClass: "customClass"
});
Hope this helps.
希望这可以帮助。
$("#myList").select2({
containerCssClass: "customClass"
});/* select2 version 4.0.0 Beta 2 */
.select2-container--default .customClass.select2-selection--single{
border-radius: 24px;
height: 40px;
padding-top: 5px;
}
.select2-container--default .customClass.select2-selection--single .select2-selection__arrow b{
border-color: #00b37c transparent transparent transparent;
border-width: 8px 8px 0 8px;
margin-left: -22px;
}
.select2-container--default.select2-container--open .customClass.select2-selection--single .select2-selection__arrow b{
border-color: transparent transparent #00b37c;
border-width: 0px 8px 8px;
margin-left: -22px;
}
.select2-container--default .customClass.select2-selection--single .select2-selection__arrow{
padding-top: 5px;
height: 35px;
}
.select2-container--default .customClass.select2-selection--single .select2-selection__rendered{
color: #00b37c;
font-family: monospace;
font-size: 16px;
margin-left: 8px;
height: 40px;
}<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<select id="myList" style="width:300px">
<option value="A">Protection Form</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
<option value="D">Option 4</option>
</select>回答by Andreas Gusakov
The .custom-select class is already there (Bootstrap 4). To change the arrow of the select input you just override the background property. So for example:
.custom-select 类已经存在（Bootstrap 4）。要更改选择输入的箭头，您只需覆盖背景属性。例如：
.custom-select { background: none; }
removes the arrow.
删除箭头。
