- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Syntax
<select> <option value="option_value">option1</option> <option value="option_value">option1</option> </select>
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.
Example
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>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body style="background-color:#b2d6c0;">
<center>
<h1 style="color:darkgreen;">Tutorialspoint</h1>
<div class="dropdown-list">
<select>
<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>
</select>
</div>
</center>
</body>
</html>
Conclusion
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.
109 Views
