Currently, I am working on creating a select menu using Bootstrap 4. I successfully replaced the arrow icon in the select element by changing the background, but now I am facing a challenge in adding a left border to that image. I have tried different methods but haven't been able to find a solution.
To provide a visual reference, I have included an image of the desired design: https://i.sstatic.net/65A1S.png
Here is what I have achieved so far: https://i.sstatic.net/5px4I.png
Below is the code I have implemented up to this point:
<select class="custom-select">
<option disabled>Choose 1</option>
<option>another</option>
<option>2</option>
</select>
Furthermore, here is the CSS code I have utilized:
.custom-select {
background: #fff url("/assets/images/down-arrow.png") no-repeat right 0.75rem center;
background-size: 12px 12px;
}