Site logo

Archived topic

Customize the search bar

31 replies · Started by Justin on August 1, 2022

Viewing posts 16–30 of 32

How can I remove the little box around the search icon and anyway I can make the search rectangular box rounded on the edges?

Try this CSS:

button.wp-block-search__button.has-icon {
    border: 0;
}

.wp-block-search__inside-wrapper {
    border-radius: 10px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

it also has a different shade of color inside box

You can add this CSS to change the input / buttons background colors:


.wp-block-search input,
.wp-block-search__button{
	background-color: transparent;
}

Add this CSS as well:

input[type="search"]:focus {
    background-color: transparent !important;
}

That fixed that issue but now if someone clicks on the drop-down previously typed in text the blue color comes back without filling the entire search bar, and is this the best way to make the changes by adding this css code in the customizer? how big of an impact is it on site speed?
https://postimg.cc/HrJjRZ15

There won't be any noticeable impact on speed regarding the CSS size.

Can you link me to your site where we can see the search bar?

Please be noted, that the search block is NOT from the theme, it's from WP and the theme doesn't have control over it, it's kind of out of the scope of the theme support, but we are still trying our best to help you out here.

Removed

Thank you for helping

I had some other questions like my homepage header and recent blogs are not centered on mobile devices and I couldn't figure out how to center the read more lable on the archive cards?

How do you make the previous searches show up in the first place?

I tried searching for several words, but don't see the drop-down you mentioned.

For other questions, please open new topics, thanks!

not sure

This archived topic is closed to new replies.