[Support request] Customizing Search Block

[Andrew]

Hello,

I’m looking to customize the search box on my homepage (using the ‘search’ block in the WP editor). Can you share examples of CSS I could play with? Specifically, I’m looking to customize the outline color, round the corners of the search box (if possible), color and size of the text inside the box, color of the search button, color of the text on the button.

Thanks for your help.

Andrew

[David]

Hi there,

first off most of the colors for the search from are set in Customizer > Colors > Forms or Buttons.
For specific styles just for WP Search Block form – these should get you started:

/* Label styles */
.wp-block-search label {
	font-weight: bold;
}
/* Input styles */
.wp-block-search .wp-block-search__input {
	border-radius: 10px;
	border: 2px solid #f00;
	background-color: #ccc;
}
/* Button Styles */
.wp-block-search .wp-block-search__button {
	border-radius: 4px;
	background-color: #00f;
	color: #fff;
}
.wp-block-search .wp-block-search__button:hover {
	border-radius: 4px;
	background-color: #0f0;
}

[Andrew]

Thanks David! That worked. One thing though….

It’s looking great on desktop, but on mobile the border radius on the search box is much greater (the corners are much more rounded). Sometimes when I tap into the search box the corners stay rounded. Other times, they switch to the correct border radius (matching desktop).

Seems like something may be a bit off.

Could you please take a quick look? it’s on my homepage: https://prudentreviews.com/

[Andrew]

I also noticed that when I start typing into the search box on desktop, the border of the search box changes and it looks like there are two thin lines around it.

[David]

Those lines around the input field are the :focus ring that is used for accessibility.

I am not seeing the other issues – can you try clearing the browser cache?

You may want to reduce the padding on the Container Block the search is inside of – so it has more space on mobile.

[Andrew]

That makes sense about the accessability.

I’ve clears my cached and I’m still seeing the rounded corners on mobile. Here’s a screenshot: https://drive.google.com/file/d/116g5RUSezT0P7SfiRg7g6NYuyhea1aUv/view?usp=sharing

It’s strange. If I start scrolling, the corners change. It’s almost as if it’s defaulting to the rounded corners and the CSS is delayed. I use WP Rocket to optimize CSS, but not sure if thats the issue.

I also found this thread: https://wordpress.org/support/topic/rounded-corners-of-search-widget-input-in-ios/

Could this be an iOS issue?

[David]

Yes thats the issue 🙂

Add the property to this rule:

/* Input styles */
.wp-block-search .wp-block-search__input {
	border-radius: 10px;
	border: 2px solid #f00;
	background-color: #ccc;
        -webkit-appearance: none;
}

[Author]

Posts