Jump to content

Search Bar Customisation

Recommended Posts

Site URL: https://rocksforlife.com/

I would love the search bar to have rounded corners and the input text have a different font. How could I target the area? For some reason the following doesn't work:



{ border: 2px black yellow !important;
border-radius: 14px !important;
padding: 15px 15px 15px 45px;

Also, the search bar is only placed for mobile.

Thank you loads!

The site is: www.rocksforlife.com

Screenshot 2021-06-15 at 09.01.22.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 6/21/2021 at 2:34 PM, ievavi said:

Good point! Actually, yes :) Would you provide some help for this?

Add to Design > Custom CSS

/* Tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1622052386291_10520+.row>.span-2:nth-child(4) {
    position: relative;
    left: -100px;
div#block-yui_3_17_2_1_1622048999936_40928 * {
    white-space: nowrap;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.