Styling the <select> and <option> in css

HTML-CSS
1

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

2

Tried it out, turns out, yes!

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

This came out as:

image

2 Likes
3

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
4

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

scss

@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='http://www.w3.org/2000/svg' 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

html

<select class="different">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
<select>
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>

have a look at this fiddle:
https://jsfiddle.net/9astnj63/1/

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

5

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