Archived topic
Styling default search bar
3 replies · Started by Sasha on October 14, 2022
Hello there,
I'd like to update the default search bar styling:
- Close gap between text input field and search button
- Give the single rectangle unit a border radius of 5
- Change the color of the X to #04BFA3
- Change the position of the X so it's not so close to the right edge of the text input field
- Remove the border line around the search bar
Thanks for any help you can provide!
Hi there,
Please be noted, the search bar is a WP core feature, not a part of GP, so this is actually not theme related.
We can help with basic customization, but can't provide further style changes, thanks for your understanding!
– Change the color of the X to #04BFA3
– Change the position of the X so it’s not so close to the right edge of the text input field
The X is not an HTML element, we can not target it simply using CSS.
For others, try this CSS:
button.wp-block-search__button {
margin-left: 0;
border: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.wp-block-search__inside-wrapper {
border: none !important;
}
input#wp-block-search__input-1 {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}Ahhh, my bad! Thanks for your help though – that worked perfectly. Really appreciate it!
You are welcome :)
