title: How to fully hide double arrows in bootstrap 4 custom-select
body: <p>Answers have been given for how to hide the double arrow on the right of the bootstrap 4 custom-select field as shown <a href="https://stackoverflow.com/questions/49245610/how-to-remove-input-group-select-arrow-in-bootstrap-4">here</a>. The resulting selection box still hides the text on the right hand side behind the now opaque arrows.  I would like to be able to use as much of the right hand side space as on the left hand side for a display on designed for a mobile device.  In other words, what additional changes can be made so the text is visible to the far right of the selection box.  You can see the issue by adjusting your screen width.</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{
  background-image: none !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="form-group"&gt;
    &lt;div class="col-8"&gt;
      &lt;div class="input-group"&gt;
        &lt;select class="custom-select"&gt;
          &lt;option&gt;end of text string will hide behind opaque double arrow around here&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    </code></pre>
  </div>
  </div>
  </p>