Skip to main content

Styling Select tags

Below examples would explain on how to style a dropdown in css.

Basic Styling​

Native Select Element​

You can apply basic styles directly to the <select> element, but the extent to which these styles are applied varies between browsers.

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Custom Dropdown Arrow​

One common customization is to change the dropdown arrow. You can hide the native arrow and use a background image.

select {
  appearance: none; /* Remove native arrow */
  background-image: url('arrow.png');
  background-repeat: no-repeat;
  background-position: right center;
}

Wrapping with a Custom Element​

To have more control over styling, you can wrap the <select> element in a custom container.

<div class="select-wrapper">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "\25BC"; /* Unicode down arrow */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

Interactive States​

You can also style the select element for different states like hover, focus, and disabled.

select:hover {
  border-color: #007bff;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Accessibility​

  1. Labels: Always use <label> elements with a for attribute that matches the id of the select element.
  2. ARIA Attributes: Use ARIA attributes like aria-required for enhanced screen reader support.

Example HTML​

Here's how your HTML might look:

<label for="options">Choose an option:</label>
<select id="options">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Complete Example​

Combining all the above, here's a complete example:

index.html
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="./main.css" >
  </head>
  <body>
      <header></header>
      <form>
          <span>
              <label for="fName">First Name</label>
              <input id="fName" name="fName" pattern="[A-Za-z]{3,}" type="text" >
          </span>
          <div>
              <p> Select your gender</p>
              <span>
                  <input id="male" type="radio" name="gender" >
                  <label for="male">Male</label>
              </span>
              <span>
                  <input id="female" type="radio" name="gender" >
                  <label for="female">FeMale</label>
              </span>
          </div>
          <div>
              <p> Select languages you can speak</p>
              <span>
                  <input id="english" type="checkbox" name="languages" >
                  <label for="english">English</label>
              </span>
              <span>
                  <input id="spanish" type="checkbox" name="languages" >
                  <label for="spanish">Spanish</label>
              </span>
              <span>
                  <input id="hindi" type="checkbox" name="languages" >
                  <label for="hindi">Hindi</label>
              </span>
          </div>
          <div>
              <p> Select your country</p>
              <span>
                  <label for="country">Country:</label>
                  <select id="country">
                      <option>Australia</option>
                      <option>Finland</option>
                      <option>India</option>
                      <option>Spain</option>
                  </select>
              </span>
          </div>
          
        </form>
  </body>
</html>