Adding separator between arrow icon and text in select - css

Question

I am trying to build a select menu and I am using Bootstrap 4. I replaced background to replace arrow icon in select element, but now I need to add border left to that image, I am not finding anyway.
For reference, I am attaching Image of what's required
and this is what I have achieved so far
and code I did till now
HTML
<select class="custom-select">
<option disabled>Choose 1</option>
<option>another</option>
<option>2</option>
</select>
And this is my CSS
.custom-select {
background: #fff url("/assets/images/down-arrow.png") no-repeat right 0.75rem center;
background-size: 12px 12px;
}

Answer 1

You can use another image for the line in the background as well or make a combined image of arrow and line
Stack Snippet
.custom-select {
background: url("https://image.flaticon.com/icons/png/128/118/118738.png") no-repeat right 0.75rem center, url("http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_low_line_uFE33_icon_128x128.png") no-repeat right 2rem center;
background-size: 12px 12px;
width: 300px;
height: 40px;
-webkit-appearance: none;
position: relative;
padding: 0 10px;
}
<select class="custom-select">
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>

Answer 2

Wrap the select in another DIV (eg. custom-select-wrapper) and use a CSS psuedo element for the border...
https://www.codeply.com/go/edxDmWNLx6
<div class="custom-select-wrapper">
<select classs="custom-select">
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
</select>
</div>
CSS
.custom-select-wrapper {
position: relative
}
.custom-select-wrapper:after {
border-left: 2px solid #ccc;
content:"\00a0";
position: absolute;
top: 0;
right: 46px;
z-index: 2;
display:block;
height: 38px;
}

Answer 3

I suggest you wrap the select in a div and add an after to it
<div class="select-wrapper">
<select class="custom-select"></select>
</div>
Than, in CSS you add the arrow with an after
.select-wrapper {
position: relative;
background: #fff;
z-index: 1;
}
.select-wrapper select {
background: transparent;
}
.select-wrapper:after {
position: absolute;
z-index: -1;
top: 2px;
right: 0;
bottom: 2px;
width: 12px;
background: #fff url("/assets/rogers/images/down-arrow.png") no-repeat right 0.75rem center;
background-size: 12px 12px;
border-left: 1px solid #ddd;
}
I couldn't test the code, because you didn't share your HTML, so I just gave you an example.
Or than you can add the line to the arrow image