logo标签列表

如何编辑选择表单箭头？（Bootstrap 4）

javascriptjquerycsstwitter-bootstrapbootstrap-4
14

我正在使用 Bootstrap 4 制作表单，我想将下拉选择元素的样式从第一版改为第二版，如下所示：

enter image description here

我尝试过多种方法(在这个社区中已经引用了需要引用)来编辑箭头，但都没有成功。

有人能帮我解释一下如何实现所需的结果吗？

请在下面找到一个示例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>
1
你应该使用一些自定义的 select 下拉框，例如 selectyze、select2 等。然后你可以使用 CSS 自定义外观。 - Mohit Bhardwaj
你不能改变它的默认行为..如果需要，可以使用其他第三方工具。 - Kishan Oza
尝试使用以下代码，它可以帮助您实现 margin-top:10px; border-top:15px red solid; border-right: 15px transparent solid; border-left: 15px transparent solid; border-bottom:15px transparent solid; 的效果。 - Hidayt Rahman
是的，你可以更改它...我在这里找到了答案：https://v4-alpha.getbootstrap.com/components/forms/#select-menu - user5638822
6个回答
23

仅是一个例子。您可以将其用作参考。

在这个例子中，您将学习如何自定义选择框。然而，根据我的经验，旧浏览器不支持此方法。

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>

希望这有所帮助！

3
.custom-select类已经存在（Bootstrap 4）。要更改选择输入的箭头，只需覆盖background属性。例如：
.custom-select { background: none; }

去掉箭头。

1
将以下代码放入您的 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;
}
1
如果您可以使用Select2，则可以通过添加自定义类来简单解决问题，例如：
$("#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>

1
不错！很好的答案，因为他使用了Bootstrap。我猜他也包含了jQuery。（+1） - hdotluna
1

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

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

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

无论如何，感谢您的帮助。

2
对于帮助定位插入符号并不是非常有用。 - OverMars
实际上这改变了箭头的外观（正是我所需要的），所以谢谢！ - MikhailRatner
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接