How to customize the style of the dropdown button of select in html without using a customized image arrow?

Question

 .size-box { margin-top: -6px; width: 91px; height: 31px; border: 1px solid black; padding-left: 10px; font-family: 'Metropolis-Medium'; } 

 <select class="size-box"> <option >7</option> <option >8</option> <option >9</option> <option >10</option> </select> 

I want to style the button encircled in the picture, its background will be black and it will be more flat. However whenever I'm editing the design it's not affecting the select button. Would you give me an advice how to do it using CSS only?

Answer 1

Here's a great example of how this can be done

You're pretty much using the:

-webkit-appearance: value;
-moz-appearance:    value;
appearance:         value;

And creating a background-image on the select element