Styling the <select> and <option> in css

So I was wondering is it even possible to style these tags in CSS

Tried it out, turns out, yes!

  background-color: green;
  color: yellow;
  <option disabled selected>Your Choice</option>
  <option id="1">Option1</option>
  <option id="2">Option2</option>

This came out as:



Hi @ARQSoft,

I’m guessing you want to get rid of the default select button for the menu. The trick to customizing these is to use display: none; on the select tag. This gets rid of the default arrow and then you can use . select-selected:after to create a custom drop down arrow.

You can find an example of this here.

1 Like

Hello ARQSoft,
There is another way of changing the dropdown arrow by using appearance, background and svg image.

Created as scss mixin so can easily change color


@mixin background-up-down($color: #000) {
  $rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='' version='1.1' width='8' height='13' viewBox='0 0 8 13'><polygon points='0,8 4,13 8,8' style='fill: #{$rgb}'/><polygon points='4,0 0,5 8,5' style='fill: #{$rgb}'/></svg>");

select {
  padding: 0.5em 0.5em;

  &.different {
    @include background-up-down(purple);
    appearance: none;
    background-origin: content-box;
    background-position: right -1em center;
    background-repeat: no-repeat;
    background-size: auto;
    box-sizing: border-box;
    padding-right: 1.5em;

Will need to fiddle with background-position and padding to get the updown arrow in desired position.
Note: any svg image can be used not just up/down arrow as used in iphone select


<select class="different">

have a look at this fiddle:

For IE compatibility will need to add in base64 image - not shown in this example.

Hope that helps out and gives you more ideas on how to manipulate

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.