Jump to content

Remove magnifying glass icon on search box

Go to solution Solved by SaranyaDesigns,

Recommended Posts

I will like to simplify the search box on the website I am designing. I will like to remove the icon (magnifying glass) and only have the word "Search". I already added some css to remove the border and have the word search underlined. Ideally I will also like to left align  "Search" to the underline. See attachment.  Thanks in advance! 



Link to comment

@LucyBold ah I see, looks like there is a border radius on the div... but it's not showing in any of my browser tools, so probably browser-specific... what kind of phone do you have and what browser are you using?

You could start by setting the border radius to 0... 

.sqs-search-ui-button-wrapper.color-dark .search-input {
	border: 1px solid #000;
	border-radius: 0 !important;

If that doesn't work, I would remove the border entirely and put it on a containing div instead, so swap that bit of code for this:

#yui_3_17_2_1_1700581249574_997 {
	border-bottom: 1px solid #000;
.sqs-search-ui-button-wrapper.color-dark .search-input {
	border: 0 !important;

let me know?

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.