Style HTML select list - html

Question

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;
}

Answer 1

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>

Answer 2

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:
Accessibly hide the original select.
Rebuild the select with custom
markup (probably a definition list), that you style how you want.
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.