- This topic has 5 replies, 3 voices, and was last updated 3 years, 8 months ago by
.
-
Posts
-
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.
Customer Support
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.
- You must be logged in to reply to this topic.
