Remove border, search text and search icon

Store Design
, , , , , , , ,
1

Hey, I am wondering if I can delete these sections when I click on the search icon on the header, I want to remove the search icon which if you click you will enter the search. I want to remove the border when clicking on the search bar. And finally, I want to remove the search text when clicking on the search bar. I will show a picture explained down below! Thanks in advance!

LINK:https://e8aaa0-3.myshopify.com/search?q=body

PASSWORD: mohwhi

THEME: TASTE

2

Hi there,

You didn’t upload the picture.

To your header section add the following custom CSS.

.search__input:active{
   border: none;
}

The search icon in the input field is actually also the “submit” button. I would not recommend you to remove that. Also for the sake of accessibility I would not remove the “search” word from the input field when active.

Hope this helps!

3

Hey Im sorry, here is the picture. Can the border also be removed when not active? Thanks!

Image 23-12-2023 at 16.58.jpeg
Image 23-12-2023 at 16.58.jpeg3420×2214 260 KB

4

Hi,

Apologies, here is the good CSS.

form.search > .field::after,
form.search > .field >.field__input:focus{
    box-shadow: unset;
    border: none;
}
5

Hello @PRETTYFRIDAYS

You can add code by following these steps to change ATC background color

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

predictive-search.search-modal__form label.field__label { display: none; }