title: Bootstrap 4 .custom-select class showing two overlapping arrow styles
body: <p>I've encountered an issue when using the .custom-select class in Bootstrap-4. It seems to show two arrow styles that are overlapping:</p>
  <p><a href="https://i.stack.imgur.com/Alvpc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Alvpc.jpg" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.custom-select {
    position: center;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 20px;
    border-radiu: 2.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
  &lt;div&gt;
            &lt;select class="custom-select"&gt;
            &lt;option selected&gt;Choose One...&lt;/option&gt;
            &lt;option value="1"&gt;Boots&lt;/option&gt;
            &lt;option value="2"&gt;Shoes&lt;/option&gt;
            &lt;option value="3"&gt;Feet&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>
  <p>Any help would be much appreciated!</p>