If you're looking to hide the double arrow on the right of the bootstrap 4 custom-select field, there have been solutions provided here. However, even after implementing those changes, the text on the right-hand side still gets obscured by the opaque arrows. To utilize the space on the right as efficiently as on the left for mobile display, additional modifications are needed. How can we adjust the code so that the text remains visible all the way to the far right of the selection box? This issue becomes more prominent when adjusting the screen width.
.custom-select{
background-image: none !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-8">
<div class="input-group">
<select class="custom-select">
<option>end of text string will hide behind opaque double arrow around here</option>
<option>2</option>
</select>
</div>
</div>
</div>