How can I made this kind of form select menu using bootstrap 4?

Question

I am trying to change the custom bootstrap default form selector arrow. Is there any way to change the default arrow in the form and add this <i class=" fas fa-caret-down"></i> caret down icon?

Answer 1

.custom-select is the class that add this icon as a background

So you can download the SVG and override the class and it should work.

am sure there is a better way than that. But it's the only way I could think of at the moment.

.custom-select {
    background: url('../images/caret-down-solid.svg') no-repeat right .75rem center/8px 10px;

}