How to style <select> with bottom border and caret?

Question

How can i style the Select element to look like it is in the image? I'm struggling to get both down caret and line to appear at the same time. I've tried playing around with setting a border-bottom: 1px and then setting -webkit-appearance: none but the caret disappears.

 select { border: 0px 0px 1px 0px; } 

 <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> 

Answer 1

您将设置border-bottom而不是bottom-border ，它在CSS中不存在

Answer 2

border-bottom
font-family

I think that's all you will really need to change to make it more like the example you've shown

Answer 3

I'd start with the "clean sheet" or all: unset to remove all predefined styles of the select element , then style it as desired:

 select { all: unset; padding-right: 15px; border-bottom: 1px solid; background: url('https://www.charbase.com/images/glyph/9662') no-repeat right; background-size: 16px; } 

 <select> <option>All Question Types</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>