Search form in header text color

[Frederik Leemans]

I’ve noticed a different rendering of the search form in the header, depending on the browser (Safari vs Chrome). My main problem is that in Safari, the text is white on a white background. Any ideas how to address this?

Thanks,

Frederik

• This topic was modified 4 years, 7 months ago by Frederik Leemans.
• This topic was modified 4 years, 7 months ago by Frederik Leemans.

[Andy]

Hi Frederik, do you have it on a live site that I can take a look at please?

[Andy]

Could you try adding this CSS to Customize > Additional CSS:

#masthead .search-form input[type="search"],
#masthead .woocommerce-product-search input[type="search"] {
    background: #000000;
}

Please let me know if that works, or not. Thanks.

[Frederik Leemans]

Sure. Still ‘under construction’, but this is it:

Thanks,

Frederik

[Frederik Leemans]

Hi Andy,

Doesn’t seem to resolve the problem…

I do have another bit of extra CSS in there, but I don’t think it would interfere:

.entry-header.with-image.full:before,
.archive-header.with-image.full:before {
background: transparent;
}

Picked that up from this site to keep the original header image colors.

Thanks,

Frederik

[Andy]

Thanks, yes that extra CSS would not intefere with the search form.

Will need to do some more digging into this. Will get back to you soon when I have more information.

Thanks.

[Andy]

Okay, please remove the CSS I gave you earlier and replace with this:

#masthead .search-form input[type="search"],
#masthead .woocommerce-product-search input[type="search"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: #2d364c;
}

Let me know if that works, thanks.

[Frederik Leemans]

Yep, that seems to fix the problem.

Thanks!

Frederik

[Andy]

Thanks for letting me know it works.

-webkit-appearance: none; should have been included in the theme so that the styling will work with safari. I’ll get the theme updated with this any other form inputs where it may be missing.

[Author]

Posts