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/

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!

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

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