Bootstrap 4 .custom-select class showing two overlapping arrow styles

Question

I've encountered an issue when using the .custom-select class in Bootstrap-4. It seems to show two arrow styles that are overlapping:

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

The additional CSS I added was to just match other forms I have been using, the problem still persists without any of those custom styles.

Any help would be much appreciated!

Answer 1

You're most likely missing the vendor prefix classes for the .custom-select element, so you'll need to setup Autoprefixer to get this working.

Autoprefixer will add

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