How to style a select dropdown with only CSS?

The website navigation plays an important role while building the website because it contains the dropdown list. The collection of various lists that exists in one or more navigation is called a dropdown list. To create the dropdown list it needs the select and option element. The option element is used under the select element which collects the list of various types like products, subjects, courses, etc.

In this article, we are going to design the select dropdown with only CSS.


   <option value="option_value">option1</option>
   <option value="option_value">option1</option>
  • The select element is used to create a drop-down list. This element is normally used in the form to collect user data.

  • The option element stores the group of lists which is visible to the user in a dropdown list.

Properties used

The following properties used in the example are −

  • position − Define how an element is positioned in the output.

  • overflow − Specifies what the content flows in the element.

  • display − Define the element whether it is treated as inline or block.

  • width − Define the width of the list.

  • height − Define the height of the list.

  • line-height − Define the height of the line box.

  • border-radius − Define the round corner of the element.

  • padding-bottom − Define the bottom space of the element.

  • color − Define the color of the text.

  • background-color − Define the background color of the body.

  • background − Define the color of the background.


In this example, we will use internal CSS to define all the properties of a drop-down list. Then we set the inline properties to body elements to create better user interaction on the webpage. To start the dropdown list we first use the select element. Inside the select element, the option element is used to collect all the lists of the subject. For styling each list it will use the inline CSS properties and it looks better. So, this way we will design the dropdown with only CSS.

<!DOCTYPE html>
      .dropdown-list {
         position: relative; 
         overflow: visible;
	     display: block;
		 width: 19em;
		 height: 2em;
		 line-height: 2;
		 border-radius: 30em;
		 padding-bottom: 10px;
		 background: orange;
		 outline: 0;
		 appearance: none;
<body style="background-color:#b2d6c0;">
      <h1 style="color:darkgreen;">Tutorialspoint</h1>
      <div class="dropdown-list">
            <option style="background:pink;" value="School Subject ">School Subjects</option>
			<option style="background:pink;" value="Math">Math</option>
			<option style="background:pink;" value="Science">Science</option>
			<option style="background:pink;" value="Social Science">Social Science</option>
			<option style="background:pink;" value="English">English</option>
			<option style="background:pink;" value="Hindi">Hindi</option>


We designed the dropdown list by using HTML and CSS. We saw how we create the list of five subjects in the dropdown list by using the select and option tag. Then we used the CSS properties like overflow, display, background, etc. to design the dropdown list. The design of the dropdown list interacts with the user to spend a long time on the website.

Updated on: 10-May-2023