How can I change the color of my header search box in Dawn?

Store Design
,
1

Hi everyone!

Could you please suggest a code to change a search box color in header? The search icon is green but when click on it it turns to white and almost disappears. Is it possible to keep it in green as well as text input?

Olga_MLB_0-1668513853929.jpeg
Olga_MLB_0-1668513853929.jpeg2388×790 91.2 KB

Olga_MLB_1-1668513864544.jpeg
Olga_MLB_1-1668513864544.jpeg2388×808 37.9 KB

Your help is much appreciated!

Regards,

Olga

Mylittlebunny.nl

1 Like
2

@Olga_MLB

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.search__input.field__input {color: #638a7e !important;}
3

Hi @Olga_MLB ,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please add the below CSS in your base.css file.

.search-modal__form .field__input:focus {
    box-shadow: none;
    border: 2px solid #638a7e;
    outline: 0;
}
 .field__input:focus ~ .field__label, .search__button:not(:focus-visible):not(.focused) {
    color: #638a7e;
}
.field:after {
    border: 0.1rem solid #638a7e;
    box-shadow: none;
}

If its working then, please do not forget to accept this solution :slightly_smiling_face:

Thanks & Regards,
Prezen Tech

4

Dear @KetanKumar ,

Thank you for the code, but it didn’t work at all. No changes.

Regards,

Olga

5

Dear @Prezentech ,

Thank you for the code. I changed colors and after that it worked partially:

Olga_MLB_0-1668526921882.jpeg
Olga_MLB_0-1668526921882.jpeg2388×774 34.7 KB

Is it possible to remove white frame and make green frame thicker? Can be “X”-sign also green as well as text input?

Best regards,

Olga