[Support request] Customize the search bar

[Justin]

I want to customize the search bar.
I added the search bar on the right sidebar by using elements.
However, there is no function to customize the search bar.

Therefore, I will have to change it by adding code to CSS.
I don’t want to use any plug-in.

Can you advise how I can modify the code for search bar?
I want to make the search borders round on the edges and add text “Search…” inside with the color blue?

[Fernando]

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

[Justin]

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

[Fernando]

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

[Justin]

Search bar created in GP with elements

[Fernando]

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.

[Justin]

didn’t work

[David]

Hi there,

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

[Justin]

Yea I made it in element and used the search block

[David]

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

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

[Justin]

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

[Fernando]

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

[Justin]

my site is still not public or active

[David]

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.

[Justin]

How do I attach it?

[Author]

Posts