- This topic has 7 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hey there,
Can you please help me style my search button? I’m using the default search block.
Thanks,
FergalCustomer Support
Hi Fergal,
Can you provide the link to where we can see this Search Box? We’ll try our best to help you style it.
You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Hey Fernando,
Sorry, I provided it as a description with the screenshots. Please see it in private and let me know if that helps.
Thanks,
FergalTry adding this through Appearance > Customize > Additional CSS:
.wp-block-search__inside-wrapper { flex-direction: row-reverse; border-radius: 4px; background-color: var(--base); }Thanks Fernando! That did the trick. Lastly, can you please help me style the box when in focus? I’d like to remove the white background and the red border. I tried to add the following CSS, but when inspecting the element it is like there is a duplicate rule that it then defaults to (see private area).
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus { color: var(--contrast); /* background-color: var(--base-2); */ /*border-color: var(--contrast-3); */ }Can you try adding this as well?:
input.wp-block-search__input:focus { background-color: var(--base); border: 0; }I replaced my css with yours and it worked! Thank you!
You’re welcome, Fergal!
- You must be logged in to reply to this topic.
