Dropdowns
Dropdowns
In CSS, you can style the appearance of dropdowns using the select and option elements. Here’s an example of how you can style a dropdown:
HTML:
<label for="my-dropdown">Select a fruit:</label>
<select id="my-dropdown" name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
CSS:
/* Style the select element */
select {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
line-height: 1.4;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
/* Style the options */
option {
color: #555;
background-color: #fff;
}
/* Style the hover state */
select:hover, select:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
/* Style the active state */
select:active {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
/* Style the dropdown arrow */
select::-ms-expand {
display: none;
}
select::-webkit-select-arrow {
display: none;
}
select::after {
content: '\25BC';
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size: 14px;
pointer-events: none;
}
In this example, we first style the select element to have a block display, a width of 100%, padding, font size, line height, and background color. We also give it a border, border radius, and box shadow to create a button-like appearance. We use CSS transitions to animate the border color and box shadow when the dropdown is hovered or focused.
We then style the option elements to have a color and background color.
Next, we use CSS to hide the default dropdown arrow and create a custom arrow using the ::after pseudo-element.
Finally, we add styles for the hover, focus, and active states of the select element to change the border color and box shadow.