Customize the search bar

Hi Justin,

Can you share the link to your site?

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

My site is currently in staging so I do not have a link to share

I see. What search bar are you using? Is it the one from GP or from WP?

Search bar created in GP with elements

If you’re using the WP Search Block, you can add the placeholder to the block itself.

In terms of design, here are a couple of CSS you can try adding through Additional CSS:

input[type="search"] {
    border: solid 3px #0000ff;
    border-radius: 20px;
    color: #0000ff;
}

input[type="search"]::placeholder{
    color: #0000ff;
}

You may modify theme as well to your preference.

didn't work

Hi there,

are you using a Block Element ? And is it a Search Block that you used ?

Yea I made it in element and used the search block

As we can't see it on the front end, we need to know what settings you have on the search block - see here:

https://www.screencast.com/t/bmgoHybuO

NOTE: If you don't require a Search Label then you should Toggle that first toolbar option to Off.

How can I remove the little box around the search icon and anyway I can make the search rectangular box rounded on the edges?

Can you re-share the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/?s=private+information

my site is still not public or active

Can you share a screenshot of the search block with the toolbar visible as i did here:

https://generatepress.com/forums/topic/customize-the-search-bar-2/#post-2342433

Then we can advise on how to style it - but we need to know what settings you're using so we can replicate it locally.

How do I attach it?