0

.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>

dropdown concern

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?

J.Doe
  • 61
  • 1
  • 9
  • maybe this will help: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript – Ulysses Nov 22 '17 at 03:55
  • the duplicate you are referring to me has an image button. Can i style it without using a customized arrow image? – J.Doe Nov 22 '17 at 03:58

1 Answers1

2

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

csilk
  • 2,732
  • 3
  • 23
  • 40