Bootstrap 4 .custom-select类显示两个重叠的箭头样式

Question

嘿伙计们在Bootstrap-4中使用.custom-select类时遇到了一个问题.它似乎显示两个重叠的箭头样式

见图

.custom-select {
  position: center;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
  margin-bottom: 20px;
  border-radiu: 2.5;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div>
          <select class="custom-select">
          <option selected>Choose One...</option>
          <option value="1">Boots</option>
          <option value="2">Shoes</option>
          <option value="3">Feet</option>
          </select>
        </div>

我添加的额外CSS只是匹配我一直使用的其他表单,问题仍然存在,没有任何这些自定义样式.

任何帮助将非常感激!

Answer 1

您很可能错过了该.custom-select元素的供应商前缀类,因此您需要设置Autoprefixer才能使其正常工作.

Autoprefixer将添加

-webkit-appearance: none;
-moz-appearance: none;