[Resolved] Customize search bar block

[Fergal]

Hey there,

Can you please help me style my search button? I’m using the default search block.

Thanks,
Fergal

[Fernando]

Hi Fergal,

Can you provide the link to where we can see this Search Box? We’ll try our best to help you style it.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Fergal]

Hey Fernando,

Sorry, I provided it as a description with the screenshots. Please see it in private and let me know if that helps.

Thanks,
Fergal

[Fernando]

Try adding this through Appearance > Customize > Additional CSS:

.wp-block-search__inside-wrapper {
    flex-direction: row-reverse;
    border-radius: 4px;
    background-color: var(--base);
}

[Fergal]

Thanks Fernando! That did the trick. Lastly, can you please help me style the box when in focus? I’d like to remove the white background and the red border. I tried to add the following CSS, but when inspecting the element it is like there is a duplicate rule that it then defaults to (see private area).

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    color: var(--contrast);
    /* background-color: var(--base-2); */
    /*border-color: var(--contrast-3); */
}

[Fernando]

Can you try adding this as well?:

input.wp-block-search__input:focus {
    background-color: var(--base);
    border: 0;
}

[Fergal]

I replaced my css with yours and it worked! Thank you!

[Fernando]

You’re welcome, Fergal!

[Author]

Posts