How to make text in search bar color "#020317"?

Solved
Highlighted
Explorer
167 2 8

Hi,

I'm struggling to make the text(input as placeholder text) in my mobile menu the color #020317. I dont know what css line to edit:

 

Knipsel.PNG

 

My website url is: smartsnutrition.myshopify.com

 

Hope someone can help!

Thanks

0 Likes
Tourist
6 2 1

This works:

 

.snize-input-style::placeholder {
    color: #020317 !important;
}

 

You may need to tweak the selector rule to perfect it for your site.

0 Likes
Highlighted
Shopify Expert
1381 112 209

Hello,

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file
::placeholder {
color: #020317 ;
opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #020317 ;
}

::-ms-input-placeholder { /* Microsoft Edge */
color: #020317 ;
}

0 Likes
Highlighted
Explorer
167 2 8

This does not work aswell.. I'm using Smart Search & Instant Search app aswell. Can't change things there too..

0 Likes
Highlighted
Explorer
167 2 8

@jt2190  your code works, can you make make distinction between mobile and desktop version to? Also you got the css line to make input text + search icon same that color aswell?

0 Likes
Highlighted
Tourist
6 2 1

This is an accepted solution.

[C]an you make make distinction between mobile and desktop version to[o]?

Yes. This is done using @media rules like the following:

 

 

.search-bar input::placeholder {
font-size: 14px;
color: blue;
}

@media only screen and (max-width: 768px) { .search-bar input::placeholder { font-size: 14px; color: #020317; } } @media only screen and (max-width: 991px) { .search-bar input::placeholder { font-size: 14px; color: red; } } @media only screen and (max-width: 1024px) { .search-bar input::placeholder { font-size: 14px; color: blue; } }

 

0 Likes