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

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!!

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!!

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

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

wow that worked like a charm! thank you so much

@Beyondspace also, is there by any chance a way to align the search bar, starting from where it says "type to search" with my website title, so that it's aligned on the far left hand side?