Question

我正在使用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>

Answer 1

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

希望它有所帮助！

Answer 2

如果你可以使用Select2，那么通过添加costum类来简化解决方案：

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

希望这有帮助。

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 3

我在同一个Bootstrap 4上找到了答案

＆＃13;

<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>

＆＃13;

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

无论如何，谢谢你的帮助

Answer 4

.custom-select类已经在那里（引导4）。要更改选择输入的箭头，您只需覆盖background属性。例如：

.custom-select { background: none; }

删除箭头。

Answer 5

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

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

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

5 个答案:

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

5 个答案:

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