如何编辑选择表单箭头？（引导程序 4）答案

【问题标题】：How to edit the select form arrow? (Bootstrap 4)如何编辑选择表单箭头？（引导程序 4）
【发布时间】：2021-12-10 20:13:06
【问题描述】：

我正在使用 Bootstrap 4 处理表单，我想将箭头选择元素的样式从第一个版本编辑/更改为第二个版本，如下所示。

我尝试了不同的方法（如在这个社区中看到的需要引用）来编辑箭头，但我没有成功。

有人可以帮助我解释我如何达到预期的结果吗？

请在下面找到我的 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>

【问题讨论】：

您应该使用一些自定义的select 下拉菜单，例如selectyze、select2 等。然后您可以使用 css 自定义外观。
您无法更改其默认行为.. 根据您的要求使用其他第三方工具
试试这个会有所帮助margin-top:10px; border-top:15px red solid; border-right: 15px transparent solid; border-left: 15px transparent solid; border-bottom:15px transparent solid;
是的，你可以改变它。我在这里找到了答案v4-alpha.getbootstrap.com/components/forms/#select-menu

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

只是一个例子。可以作为参考。

在此示例中，您将学习自定义选择框的方法。但是，根据我的经验。旧浏览器不支持此方法。

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>

希望对你有帮助！

【讨论】：

【解决方案2】：

.custom-select 类已经存在（引导程序 4）。要更改选择输入的箭头，您只需覆盖背景属性。比如：

.custom-select { background: none; }

移除箭头。

【讨论】：

【解决方案3】：

如果您可以使用 Select2，解决方案将很简单，只需添加以下 costum 类：

$("#myList").select2({
     containerCssClass: "customClass"
});

希望这会有所帮助。

$("#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>

【讨论】：

不错！很好的答案，因为他正在使用引导程序。我假设他还包括 jQuery。 (+1)

【解决方案4】：

由于 Bootstrap 允许我们通过变量进行自定义。在这种情况下，我建议通过 $custom-select-indicator 变量来定义图标。

$custom-select-indicator: url(path-to-icon) !default;

【讨论】：

【解决方案5】：

把它放到你的css文件中

select {
  background-image:url("url of icon") !important;
  background-position:calc(100% - 20px) 14px,100% 0;
  background-size:20px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
}

【讨论】：

【解决方案6】：

我在同一个 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>

链接：https://v4-alpha.getbootstrap.com/components/forms/#select-menu

谢谢你的帮助

【讨论】：

在帮助定位插入符号时不是很有用。
这实际上改变了箭头的外观（我需要的），所以谢谢！