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

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

原文由 user5638822 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 324

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>

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

Stack Overflow 翻译