CODEWITHSUNDEEP
cssgoogle-chromebuttondrop-down-menuwebkit
Jimmery
Jimmery

Reputation: 10139

Using CSS to make button appear on Select Drop Down menu in Chrome / Webkit Browsers

So I have a simple drop down menu in HTML like this:

<select name="menu" class="menu">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

And I am styling it with this CSS:

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

This renders as I want it to in Firefox and Internet Explorer - the drop down menu has a 1px border along the bottom only, and has the drop down menu button (grey button with small down arrow) to the right hand side.

But in Chrome, or other WebKit browsers (like Safari), the button does not appear.

I have been toying around with the -webkit-appearance rule, playing around with the properties found here http://css-infos.net/property/-webkit-appearance but with little success.

My question is, how do I get this drop down menu to render in Chrome as it does in Firefox, with the button on the right and just a single 1px border along the bottom?

Here is a jsFiddle so you can see for yourself: http://jsfiddle.net/tkFpe/3/

Upvotes: 2

Views: 4276

Answers (2)

crazyrohila
crazyrohila

Reputation: 616

You can use border all white colored but bottom with other color for a proper dropdown menu. check this fiddle jsfiddle.net/LGwEd/3.

.menu { 
    font-size: 10px; 
    font-family: Arial, sans-serif; 
    padding-top: 2px; 
    position: relative; 
    bottom: 2px; 
    outline: none; 
    width:200px; 
    border:0; 
    appearance: menulist-button; 
}

Upvotes: 3

fizzy drink
fizzy drink

Reputation: 682

remove the -webkit part, and use just border: 0 and appearance: button;

this made it work for me using: Chrome 25.0 and Safari: 6.0.2

Upvotes: 0

Related Questions