CODEWITHSUNDEEP
google-chromedrop-down-menusafari
Paul
Paul

Reputation: 33

Removing Background Style on Dropdown Menu in Chrome and Safari?

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>

Upvotes: 1

Views: 2946

Answers (2)

AJStacy
AJStacy

Reputation: 5233

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?

Upvotes: 0

Louis Ricci
Louis Ricci

Reputation: 21116

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 */
}

Upvotes: 1

Related Questions