Archived topic
Customize the search bar
5 replies · Started by Jusung on July 26, 2022
Hello.
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?
On the button, I want to remove the background and want to make the icon black.
For the Search area, I want to remove the border excepts for the underline.
and also, I want to remove the background on the search area.
Lastly, I want to add a sentence "Search here" in the search area.
Thank you.
Hi Jusung,
You can try adding this CSS through Appearance > Customize > Additional CSS:
.wp-block-search input[type="search"] {
background-color: transparent;
}
.wp-block-search button[type="submit"] {
background-color: transparent !important;
color: #000;
border: none;
}
.wp-block-search .wp-block-search__inside-wrapper {
border-top: none !important;
border-left: none !important;
border-right: none !important;
}For the placeholder, you can alter it in the Block itself.
Hope this helps!
Thank you!
It has been resolved now!
You’re welcome Jusung!
What CSS can I add to make the search borders round on the edges and add text "Search..." with the color blue?
Hi Justin,
Can you start a new topic and 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
Hope to hear from you soon.
