title: How to edit the select form arrow? (Bootstrap 4)
body: <p>I am working on a form with Bootstrap 4 and I would like to edit/change the style of the arrow select element from the first version to the second version as depicted below. </p>
  
  <p><a href="https://i.stack.imgur.com/oUBBI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oUBBI.png" alt="enter image description here"></a> </p>
  
  <p>I tried different ways (as seen in this community <em>citations needed</em>) to edit the arrow but I had no success.</p>
  
  <p>Could someone help me by explaining how I could achieve the desired result?</p>
  
  <p>Please find bellow an example of my HTML for the problem.</p>
  
  <pre><code>&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta content="width=device-width, initial-scale=1" name="viewport"&gt;
    &lt;meta content="Description" name="description"&gt;
    &lt;meta content="index,follow" name="robots"&gt;
    &lt;link href="/images/myicon.png" rel="icon" type="image/png"&gt;
    &lt;title&gt;TITLE HERE&lt;/title&gt;
    &lt;!--CSS--&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;div class="form-group"&gt;
      &lt;label for="exampleSelect1"&gt;Example select&lt;/label&gt;
      &lt;select class="form-control" id="exampleSelect1"&gt;
        &lt;option&gt;1&lt;/option&gt;
        &lt;option&gt;2&lt;/option&gt;
        &lt;option&gt;3&lt;/option&gt;
        &lt;option&gt;4&lt;/option&gt;
        &lt;option&gt;5&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>