CSS Fault in Safari

[kckassgrParticipant]

Hi,

there’s something strange with the CSS. I “designed” a search bar and when I preview it in the admin area it’s being displayed perfectly fine. But then on the final page it shows a white field with rounded corners within the blue bar, that’s not supposed to be. I only want a completely blue bar. Please see attached screenshot. Furthermore, this is only when I’m using Safari, the problem doesn’t exist with Chrome for example.

Do you know what to do?

Thank you very much!!

[kckassgrParticipant]

file

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

My best guess is that the theme stylesheet overrides the input style. Try to add the following CSS to the search options “Theme Options->Custom CSS” tab field(https://i.imgur.com/ns4vcKl.png):

.probox .proinput input {
    border: 0px !important;
    border-radius: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

After saving the options, it should appear correctly I guess.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[kckassgrParticipant]

Thanks, but that didnt work. Any other idea? Please note the problem only exists with Safari.

[Ernest MarcinkoKeymaster]

I still think it’s a css issue.

Could you please link me to a page where the search is active? I will check it with safari on your site.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[kckassgrParticipant]

Ok I figured it out. You use input type=”search” and apparently in some browsers or whatsoever it is not allowed to override certain style settings like background for input type=”search”. I changed to input type=”text” and Safari is displaying it correctly now. The only weird thing is that on your website wp-dreams.com you have a similar bar and although it is input type=”search” as well Safari has no problems with it.

[Author]

Posts