[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 ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts