On my HTML page, I have a basic drop down menu set up like this:
<select name="menu" class="menu">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
To customize the appearance, I've added the following CSS styles:
.menu {
font-size: 10px;
font-family: Arial, sans-serif;
padding-top: 2px;
position: relative;
bottom: 2px;
outline: none;
border-bottom-width: 1px !important;
border-top-style: none !important;
border-right-style: none !important;
border-bottom-style: solid !important;
border-left-style: none !important;
border-bottom-color: #999 !important;
width:200px;
-webkit-border:0;
-webkit-appearance: button;
}
In Firefox and Internet Explorer, the drop down menu displays as intended with a single 1px border at the bottom and the grey button on the right side.
However, in Chrome or other WebKit browsers like Safari, the button doesn't show up.
I've experimented with the -webkit-appearance property by referring to this resource , but haven't had much luck resolving the issue.
If I remove this property, the menu renders with a box and the button on the right.
With the property, I get the desired single 1px border at the bottom, but lose the button.
My question is, how can I ensure that the drop down menu appears correctly in Chrome, similar to how it does in Firefox, with the button on the right and a singular border at the bottom?
Feel free to check out the jsFiddle link for a visual representation: http://jsfiddle.net/tkFpe/3/