select option featured image

How To Style Select Option using Css and JavaScript

The select tag gives us the ability to create list items which are displayed in a block form but the only tag that makes it possible to view our input is the option tag, in essence, once you have a select tag, you need to have an option tag where you place your list. styling options in select is similar to styling any other element, the only difference is that, you may at some point need to specify to which option the styling is to be applied.

There are two common ways of styling select options, we can style them using our favorite CSS or we can use JavaScript, more specifically, JQuery. The former requires basic HTML and CSS skills why the later requires at least a little knowledge of JavaScript

Using CSS to style select option

Let us take the following as our HTML structure

  <body>

<select>

<option value=””>select language<option>

 <option value=””>english</option>

      <option value=””>French</option>

      <option value=””>German</option>

      <option value=””>Spanish</option>

      <option value=””>russian</option>

</select>

Next, our aim is to style this list items inside select which are the option

if we target the select in our css like

select {

  padding: 10px;

  width: 200px;

  color: white;

  background-color: tomato;

}

The background will be tomato as specified and our result will be

image with select option

To get rid of the border, we can add

 border: none;

to get rid of the drop down arrow, we can add

 appearance: none;

this is really cool but you will notice that there is still a border when you select an option

image with select option and outline

even after setting the border property value to none. To resolve that, simple add

  outline: none;

hence, your styling should be

select {

  padding: 10px;

  width: 200px;

  color: white;

  background-color: tomato;

  border: none;

  outline: none;

  appearance: none;

}

Note

Please note the styling’s above is for the select in general just like we have in an ordered or unordered list, this means we still have the chance to style the  options, so let us try it out

select option {

  background-color: teal;

  color: aquamarine;

}

If you run the code above, you will notice the background color is tomato but on click, there is different background color of teal and the text color is aquamarine.

image with select options

You can also style each select option without using a class or an id,

For example, if we want to target the odd numbers select option, we can go like this

select :nth-of-type(odd) {

  color: orange;

  background-color: black;

}

Your result should be

 You can do the same for even number also. But if we want to target a specific select option, we can use the following code instead

select option:nth-child(1) {

  color: pink;

}

 And the first select option color will turn pink  to learn more how to style elements without class or id click here.

Using JQuery to style select option

this will be helpful if you have little knowledge of javascript

By simply adding the code below, we can specify the background color and text color for every option that is odd and the one that is even

$(document).ready(function () {

 $(“select Option:odd”).css(“background-color”, “red”);

//to add color to the select option with odd number value

 $(“select Option:odd”).css(“color”, “green”);

 $(“select Option:even”).css(“background-color”, “blue”);

//to add color to the select option with even number value

 $(“select Option:even”).css(“color”, “yellow”);

});

The above illustration is aimed at giving you a good grasp of two common ways the style select option using CSS and JQuery, again, while this works, I will like to emphasize that the last few codes will only make sense if you have little knowledge of JavaScript and JQuery

Leave a Comment

Your email address will not be published. Required fields are marked *