How to style a dropdown select menu with CSS

This article was written by in December 9, 2014, & may not be posted on other sites!
Original source url for this article: How to style a dropdown select menu with CSS

How to style a dropdown <select> menu with CSS
Do you need to style your dropdown <select> menu with CSS? This is how to:

 

How to style a dropdown <select> menu with CSS

How to style a dropdown <select> menu with CSS

You can style your select dropdown menu any way you like, a background color / image, text color, widht, height etc. To style a dropdown <select> menu with CSS you need an ID or Class of your drop down <select> menu, something like this:
(it won’t work with just select)

HTML

<select id="subject-dropdown" aria-invalid="false" name="my-menu">
<option value="Event">Event</option>
<option value="Bar">Bar</option>
<option value="Catering">Catering</option>
<option value="Nightclub">Nightclub</option>
</select>

CSS
#subject-dropdown{
height: 40px;
width: 70%;
background-color: #000000;
color: #ffffff;
}

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *