Removing Background Style on Dropdown Menu in Chrome and Safari?

Question

Is it possible to make the background and border of a dropdown menu in a form transparent in Chrome and Safari? We have it looking perfect in Firefox and IE, but Chrome and Safari seem to be keen on wanting to use their own default style. :(

This is the code we're using, the background url for the first div is to apply our own custom dropdown arrow:

<div style="margin-top:-15px;background: url(images/select-arrow.gif) no-repeat right; overflow: hidden; font-family:SwankyandMooMoo; color:#565da4; width:352px;">      
<select name="for" id="for" style="background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">
<option value="ads" style=" background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">Ads</option>
<option value="other" style=" background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">Other</option>
</select>
</div>

Louis Ricci · Answer 1 · 2012-10-12T19:23:33.410

1

EDIT now that the question is clarified here's a jsfiddle that will do what you want.

http://jsfiddle.net/wnGs8/30/

You set the background image on the select and use the wrapper div to hide the real drop down arrow.

HTML

<div class="dropdown-wrapper">
    <select class="dropdown">
        <option>Test 123</option>
        <option>Test 123</option>
        <option>Test 123</option>
        <option>Test 123</option>
    </select>
</div>

CSS

.dropdown-wrapper {
    position: relative;
    overflow: hidden;
    width: 152px; /* width minus 24 */
}
.dropdown {
    font-size: 24px;
    border: none;
    width: 176px;
    background: url('http://whatsnew.googleapps.com/_/rsrc/1299892144226/choose-release-track/arrow_down_blue24.png') no-repeat;
    background-position: 128px 0px; /* width minus 48 */
}

edited Oct 12 '12 at 19:23

answered Oct 12 '12 at 18:10

Louis Ricci

20,804
5
48
62

You're saying apply the inherit background to the select element? Tried that and it doesn't seem to be working either. Please see my original post again as I've updated it with the code we're using. – Paul Oct 12 '12 at 18:51
@Paul - what I just posted works in chrome, ff and ie8. Setting the background image on the wrapping DIV instead of the SELECT itself was probably causing issues for chrome and safari rendering. – Louis Ricci Oct 12 '12 at 19:26
Thanks for the quick reply and code, but that also doesn't seem to be working. When checking http://jsfiddle.net/wnGs8/30/ you can see in both Chrome and Safari that there is still a gray gradient being used as the background under Result. – Paul Oct 12 '12 at 19:44

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

Well, without seeing any code it makes it difficult to judge your answer. A "fix" might be to use a .png image that is 100% opaque as a background for the inputs. That should work on all modern browsers.

Edit in reply to comment: Try using background: transparent; and border: 0; as that is the correct syntax to achieve what you want.

Also, custom fonts shouldn't really affect anything. I use them all the time.

Lastly, it might not even be possible with our current HTML and CSS standards. Here's another stackoverflow question relating to yours.

How to style a <select> dropdown with CSS only without JavaScript?

edited May 23 '17 at 12:04

Community

1
1

answered Oct 12 '12 at 18:05

AJStacy

5,175
4
17
31

The png trick doesn't seem to be working, I've updated my original post so you can see the code we're using. It's a little unique since we're using custom fonts and also using a main div background image to override the default dropdown arrow. – Paul Oct 12 '12 at 18:43

Removing Background Style on Dropdown Menu in Chrome and Safari?

2 Answers2