A dropdown is a list of options that only appears when the user clicks or hovers over an option and selects one or more options from the given list. There are many ways to style a dropdown list using different CSS properties, for example, color, hover, position, margin, and many more.
We are here to explain how to style a dropdown menu using CSS. For this purpose, first, we will explain the process of creating a clickable dropdown menu, and after that, we will style the selection dropdown in CSS.
How to Create a Dropdown Menu in CSS?
You can create a dropdown menu in HTML by using <label>, <select> and <option> tags. To understand more clearly, let’s move to the syntax of the dropdown menu.
Syntax
Here is the syntax of dropdown menu:
<select>
<option value="">option1</option>
<option value="">option2</option>
...
<option value="">optionN</option>
</select>
Let’s gradually explain the HTML tags used in the above code block:
- label: It is used to specify the shortened option <label> in text form.
- select: This element enables the user to select an item from a list.
- option: It is used to provide options for the dropdown menu.
Here we present a practical example to explain the point.
Example
In the given example, we will create a <div> and add a dropdown menu inside it. After that, we will label the menu using the “<label>” tag and assign the option values with the “<option>” tag. We have added the elements within the <center> tag to show the menu in the center of the screen:
<h1>Linux hint</h1>
<div class="select">
<label for="Topic">Choose a Topic:</label>
select name="select" id="select">
<option value="1">HTML</option>
<option value="2">CCS</option>
<option value="3">JAVASCRIPT</option>
<option value="4">JAVA</option>
<option value="5">C++</option>
</select>
</div>
</center>
After executing the provided code, the following dropdown will be displayed:
As you can see, the created dropdown menu has a simple appearance. However, you can style it using different CSS properties.
How to Style Selection Dropdown in CSS?
In the CSS, we will style the selection dropdown menu as follow.
Step 1: Style Heading
Let’s modify the heading’s color using the “color” property:
color: green;
}
Here, we have assigned a “green” color to the heading.
Step 2: Change Cursor Type
Change the cursor type using the “cursor” property. As a result, when the user hovers over the menu list, the shape of the cursor will change to hand pointer:
cursor: pointer;
}
Step 3: Style Dropdown Menu
Here, we will set the attributes of the dropdown menu by assigning it a background color “lightseagreen”, border “1px solid black”, width “300px”, and height “30px”:
background: lightseagreen;
border: 1px solid black;
width: 300px;
height: 30px;
}
After completing all these steps, execute the HTML file, and look at the result:
The output shows that the appearance of our dropdown menu has been styled.
Conclusion
CSS offers multiple properties that can be used to style the dropdown menus. For instance, the border, color, and background properties are used to style the menu’s border, color, and background color. This article explained the method of styling the dropdown menu and how to assign different attributes to it.
