Jump to content

is there a way to remove the default magnifying glass image in the search bar?

Go to solution Solved by Beyondspace,

Recommended Posts

hi! i was wondering if there is a way to remove the default magnifying glass image in the search bar on my website: cledeclarte.squarespace.com/search 

i tried doing it in css, and i even changed the background image of the search bar, and it appeared in the css editor, and i saved it. but once i looked at my website on another window, it reverted back to the original search bar, even though the changes appeared in my css editor ://

 

1. also, is there a way to also remove the border on the search bar completely? i removed it in css, but from time to time i still see the border in the edit page, but when i look at my website in a different window, the border isn't there, so i'm wondering if i did it correctly

2. also, is there a way to edit the current text that is in the bar? mine says "type to search," but i was wondering if there is a way to change it to all uppercase, black font, size 0.7rem, and bold

3. and is there a way for me to align the input text with my site title?

password: rachelle

 

thank you so much!!image.thumb.png.c62c4f26b7b9c7d676293e79bc5a434b.png

Screen Shot 2023-01-20 at 12.00.48 AM.png

Screen Shot 2023-01-20 at 12.06.55 AM.png

Edited by rachellefreddie
Link to comment
  • rachellefreddie changed the title to is there a way to remove the default magnifying glass image in the search bar?
  • Replies 4
  • Views 896
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

4 hours ago, rachellefreddie said:

hi! i was wondering if there is a way to remove the default magnifying glass image in the search bar on my website: cledeclarte.squarespace.com/search 

i tried doing it in css, and i even changed the background image of the search bar, and it appeared in the css editor, and i saved it. but once i looked at my website on another window, it reverted back to the original search bar, even though the changes appeared in my css editor ://

 

1. also, is there a way to also remove the border on the search bar completely? i removed it in css, but from time to time i still see the border in the edit page, but when i look at my website in a different window, the border isn't there, so i'm wondering if i did it correctly

2. also, is there a way to edit the current text that is in the bar? mine says "type to search," but i was wondering if there is a way to change it to all uppercase, black font, size 0.7rem, and bold

3. and is there a way for me to align the input text with my site title?

password: rachelle

 

thank you so much!!image.thumb.png.c62c4f26b7b9c7d676293e79bc5a434b.png

Screen Shot 2023-01-20 at 12.00.48 AM.png

Screen Shot 2023-01-20 at 12.06.55 AM.png

I check that it is using the following code to set the glass icon

image.thumb.png.58022209fe76aaa854e1cf04d4667e08.png

If you want to set another icon, try this on Home > Design > Custom Css

.sqs-search-page-input {
  background-image: url('https://api.iconify.design/material-symbols/search.svg?width=40'); /*url for icon*/
  background-repeat: no-repeat;
  background-position: left center;
    
}
/*placeholder of input*/
.sqs-search-page-input input::placeholder {
  color: #000;
  font-size: 0.7rem;
  font-weight: 900;
  text-decoration: uppercase;
}

Support me by pressing 👍  or marking as solution if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

My testing

image.thumb.png.83bdc7b62bd930d1174f71d3b993f756.png

On my checking, it has no border

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.