Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Style select options with CSS
The CSS select element can be styled to enhance its appearance and user experience. You can modify properties like width, padding, borders, background colors, and more to customize the dropdown menu.
Syntax
select {
property: value;
}
Example: Styling Select Element
The following example demonstrates how to style a select dropdown with custom padding, borders, and background color −
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 100%;
padding: 10px 15px;
border: 1px dashed blue;
border-radius: 4px;
background-color: orange;
font-size: 16px;
color: white;
cursor: pointer;
}
select:focus {
outline: none;
border-color: darkblue;
}
</style>
</head>
<body>
<p>Learn:</p>
<form>
<select id="country" name="country">
<option value="java">Java</option>
<option value="ruby">Ruby</option>
<option value="oracle">Oracle</option>
<option value="tableau">Tableau</option>
</select>
</form>
</body>
</html>
An orange select dropdown with white text, dashed blue border, and rounded corners appears. When focused, the border becomes dark blue.
Example: Styling Individual Options
You can also apply styles to individual option elements −
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 250px;
padding: 12px;
border: 2px solid #4CAF50;
border-radius: 8px;
background-color: #f9f9f9;
font-size: 14px;
color: #333;
}
option {
background-color: #fff;
color: #333;
padding: 8px;
}
option:hover {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<p>Choose your favorite programming language:</p>
<select>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="cpp">C++</option>
<option value="go">Go</option>
</select>
</body>
</html>
A styled select dropdown with light gray background and green border appears. Options have white background and change to green with white text on hover.
Conclusion
Styling select elements with CSS allows you to create visually appealing dropdowns that match your website's design. While option styling has limited browser support, the select element itself can be extensively customized.
Updated on: 2026-03-15T12:32:34+05:30
2K+ Views
Advertisements