Cyber Monday Sale!

Save up to $50 through December 5th.

Shop Now

[Resolved] Styling default search bar

Home Forums Support [Resolved] Styling default search bar

Home Forums Support Styling default search bar

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2373886
    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!

    #2373974
    Ying
    Staff
    Customer Support

    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;
    }
    #2374152
    Sasha

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

    #2375523
    Ying
    Staff
    Customer Support

    You are welcome 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.