Remove magnifying glass icon on search box

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

@LucyBold can you share a link to the site so we can see the search bar in action? You should be able to hide the icon with some custom CSS...

Thanks @SaranyaDesigns, you can take a peak https://www.lacalifornie.es/shop here.

Thanks so much @SaranyaDesigns, it works!
Do you know if it is possible to align the word "Search " to the left of the underline and also change the style of the word to all uppercase?

@LucyBold Yep sure, just change the 10px in my original code to 0 if you want to align all the way to the left.

And then add this to make it all uppercase:

input[type=search]::placeholder {
    text-transform: uppercase;
}

Amazing, thanks for your help @SaranyaDesigns it worked perfectly!

Hello! @SaranyaDesigns, I am coming back to this thread to ask you agin for help.

I now see not a clean straight line for the search field. On desktop looks good but when resizing the browser and on mobile looks a bit odd. Any idea why? thanks so much!

https://www.lacalifornie.es/all

Hi @LucyBold it looks ok on my end... what don't you like about it, what are you hoping to have it look like?

Hello @SaranyaDesigns
I am attaching a couple of screenshots of what i see on my phone. 

@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?

@SaranyaDesigns I am using an iPhone 12 and testing on Safari.
I  used your new code and works prefectly! thanks so much again.
 

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