Style Select Option Dropdown Using CSS

This code snippet provides a way to style the select option dropdown using CSS. It allows you to customize the appearance of the dropdown menu without relying on JavaScript or additional wrapper elements. The HTML code includes a select element with various options, and the CSS code contains the styles for the select element and its options.

By applying these styles, you can personalize the dropdown’s width, height, padding, background, color, border radius, box shadow, and cursor. Additionally, the code removes the focus outline and the default arrow in Internet Explorer. With this code, you can create a visually appealing and user-friendly dropdown menu for your web application or website.

How to Style Select Option Dropdown Using CSS

1. First, load the Normalize CSS by adding the following CDN link into the head tag of your webpage.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Create the HTML select element and add your options inside it.

<select>
  <option selected value="0">Pure CSS Select</option>
  <option value="1">No Wrapper</option>
  <option value="2">No JS</option>
  <option value="3">Nice!</option>
</select>

3. Now, use the following CSS code to style the select dropdown.

body{
  background: linear-gradient(35deg, red, purple) !important;
  min-height: 450px;
}

/* <select> styles */
select {
  /* Reset */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  /* Personalize */
  width: 20em;
  height: 3em;
  padding: 0 4em 0 1em;
  background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
  color: white;
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  /* <option> colors */
  /* Remove focus outline */
  /* Remove IE arrow */
}
select option {
  color: inherit;
  background-color: #320a28;
}
select:focus {
  outline: none;
}
select::-ms-expand {
  display: none;
}

To customize the select dropdown, you can modify the CSS styles according to your preferences. Here are some key properties that you can adjust to achieve the desired customization:

1. Width and Height: You can change the width and height of the dropdown by modifying the width and height properties in the CSS code.
2. Padding: Adjust the padding property to change the spacing inside the dropdown. The values represent the padding on the top, right, bottom, and left sides respectively.
3. Background: The background property allows you to set the background color and add a background image to the dropdown. You can modify the URL of the background image or change the gradient colors to suit your design.
4. Color: Modify the color property to change the text color of the options in the dropdown.
5. Border Radius: Adjust the border-radius property to change the roundness of the dropdown’s corners.
6. Box Shadow: Modify the box-shadow property to add or adjust the shadow effect around the dropdown.
7. Cursor: Change the cursor property to set the mouse cursor style when hovering over the dropdown.

That’s all! hopefully, you have successfully styled the select option dropdown using CSS. If you have any questions or suggestions, feel free to comment below.