CODEWITHSUNDEEP
htmlcss
Christoffer Jacobsen
Christoffer Jacobsen

Reputation: 1241

Style HTML select list

Got a nice menu with rounded buttons, and I want to style the dropdown list the same way. Tried a lot of different things but there is two things I need some help with:
1. rounded corners like the rest of the buttons.
2. get a solid color, and not that animated look.

Here is a picture showing the buttons and the dropdown:

Here is the styling on the list:

#topNav .right #categoryButton {
     margin-top:5px;
     border:3px solid #fff;
     background-color:#303030 ;
     text-transform:uppercase;
     color: #fff;
     height:50px;
     width:220px;
     outline: none;
}

Upvotes: 0

Views: 5486

Answers (2)

Paul Redmond
Paul Redmond

Reputation: 3296

Check out this great article about styling a select dropdown. There are limitations however and some older browsers will render the select box its own way.

It basically involves wrapping the select in a div and styling the div:

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(new_arrow.png) no-repeat right #ddd;
   border: 1px solid #ccc;
   }
<div class="styled-select">
  <select>
    <option>Here is the first option</option>
    <option>The second option</option>
  </select>
</div>

Upvotes: 2

Pedro Moreira
Pedro Moreira

Reputation: 965

You can't do that. You have to build your own select element.

From this article discussing "What if you want complete design control?"

First, try everything you can to make that not necessary. Default form elements are familiar and work well. Making a dropdown menu match the font and colors of your brand isn't usually necessary and is more likely obnoxious at best and bad UX at worst.

If you decide that it's absolutely a good idea to customize a dropdown, then you should use JavaScript to:

  1. Accessibly hide the original select.
  2. Rebuild the select with custom markup (probably a definition list), that you style how you want.
  3. Replicate all the functionality that default selects have, which include: keyboard events like up and down arrow keys and return to select, scrolling of long lists, opening the menu upwards when select is against bottom of screen, to name a few.

There's a few more steps to accommodate different client setups and a tutorial linked for more information.

Upvotes: 0

Related Questions