
Creating a modern and stylish HTML “Select” field involves using CSS to enhance the default styling. Here’s an example of how you can achieve this:
HTML Code for Select field
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Select Field</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="custom-select-container">
<label for="fruit-select" class="select-title">Choose Your Favorite Fruit</label>
<select id="fruit-select" class="custom-select">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="date">Date</option>
<option value="elderberry">Elderberry</option>
</select>
</div>
</body>
</html>
CSS Code for Select field
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.custom-select-container {
position: relative;
width: 250px;
text-align: center;
}
.select-title {
font-size: 18px;
margin-bottom: 10px;
display: block;
}
.custom-select {
width: 100%;
padding: 10px 20px;
font-size: 18px;
border: 3px solid #007bff; /* Bold border */
background-color: #e0f7fa; /* Suitable background color */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
background-repeat: no-repeat;
background-position: right 10px top 50%;
cursor: pointer;
color: #333;
}
.custom-select option {
padding: 10px;
font-size: 18px;
color: #000;
}
.custom-select option:checked {
background-color: #007bff;
color: #fff;
}
.custom-select:focus {
border-color: #0056b3;
outline: none;
}
.custom-select option[value="apple"] {
color: red;
}
.custom-select option[value="banana"] {
color: yellow;
}
.custom-select option[value="cherry"] {
color: darkred;
}
.custom-select option[value="date"] {
color: brown;
}
.custom-select option[value="elderberry"] {
color: purple;
}
/* Style for the down arrow */
.custom-select::after {
content: '';
position: absolute;
top: 50%;
right: 15px;
width: 10px;
height: 10px;
background-color: #007bff;
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
transform: translateY(-50%);
pointer-events: none;
}
This CSS will create a modern, stylish select field that looks good and is easy to interact with with web forms.
Tags
- “How to customize HTML select field with CSS”
- “Stylish select dropdown menu tutorial”
- “Modern CSS techniques for HTML select boxes”
- “Creating attractive select fields using CSS”
- “Step-by-step guide to styling HTML select elements”