[Resolved] Styling default search bar

[Sasha]

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!

[Ying]

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;
}

[Sasha]

Ahhh, my bad! Thanks for your help though – that worked perfectly. Really appreciate it!

[Ying]

You are welcome 🙂

[Author]

Posts