[Daniel SParticipant]

Hello,

I was wondering if there was any way to change the way Safari is displaying my drop down menu? I am trying to go with a mostly flat site design, but for some reason Safari is styling my drop down menu with a color fade. In addition to not looking great with the rest of the site, it is also making the text difficult to read. The menu displays perfectly fine in both Firefox and Chrome. Here’s a link to the page, any help would be appreciated. Thank you!

-Daniel

http://www.soundsofideallife.com/home/contact/

[RadModerator]

Hi Daniel,

Thanks for posting in.

Add this css at your customizer’s custom css under Admin > Appearance.

select {

-webkit-appearance: none; 
-moz-appearance: none;
appearance: none;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: url(http://dropdown/arrow/url/) no-repeat;
background-position: right center;
background-color: #CCCCCC;
color: #000000;
border: 1px solid #000000;

}

This will give you more option to style your dropdown, and make it look the same on different browsers.

Cheers!

[Daniel SParticipant]

Very close, thank you. However, I’m still having two issues with this fix. The colors are exactly as desired now, and everything is perfect in Firefox. In Safari and Chrome, however, my text on the drop down is getting half cut off at the bottom, and I now have no drop down arrow to indicate it is a dropdown menu.

I did notice in the code that there seems to be a place to add my own custom arrow as a background image. Is this correct? And, if so, do I HAVE to add this in order for it to work? I was hoping to just change the styling, not develop a new graphic.

Also, I have migrated the site since the original post. The updated URL is:

http://www.soundsofideallife.com/contact/

Thanks again,

-Daniel

[Paul RModerator]

Hi Daniel,

Thanks for the url.

Please add the code below in the custom css.

select {
    padding:0 0.65em !important;
    height:auto !important;
}

With regards to the background, you’ll need to create an image for it to work.
Then put in the url path to your image eg. background-image: url(http://www.soundsofideallife.com/home/wp-content/uploads/2014/09/soil-top-banner-xtheme2.png);

Hope that helps

[Daniel SParticipant]

Works great! Thanks for all the help. 🙂

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[Author]

Posts