TortoiseFeel

Hello,

Welcome to the post, if you are facing similar issue on your webpage or simple app where you are trying to change the HTML input element placeholder text color according to your design or theme and changes are not applying you followed very basic documentation from MDW web docs placeholder

What is causing this issue is simple, I was facing similar issue with search field and I am using Chrome browser mainly as my default browser, so I haven’t check it was behaving right or not, so I was looking for the answers.

I have tried this solution from stakeoverflow added simple snippet from here but it still not showing reflection of change. so I though, I am writing my CSS code using SCSS, maybe I need to add in some other way or format syntax-ly, so stumbled upon on another stakeoverflow page, added the mixin in my scss code, hope to see the reflection of color change to placeholder text of input field, sorry this time it didn’t worked too,

I was wondering how to get the fix, so in my browser inspect window, i saw one selector [type=search] and some styles applying via _reboot.scss file, I tried to open that file from my application it was there, because I am using bootstrap, so its coming through that from node_modules dynamically maybe.

So in my main.scss, file where I was earlier adding css code for placeholder text “Search Author”) color to white, but it was still in dark grey color not taking effects

SCSS code

after I thought and tried to add the placeholder wrapping [type=search] selector it worked like a charm!

Finally worked, placeholder text color change to search type input field in HTML!!!

I hope you will get to learn from this simple issue and try to explore something own to figure out the issue we face.

Something some simple things are hard to figure out due to some companies work hard building great stuff making simple stuffs complicated to be fix later!

Anyways happy learning! Enjoy.

P.S

Later found simple text placeholder color text was not taking effect, maybe scss is not compiling the placeholder css code as default placeholder target selector, added below code to target text field, select and textarea individually and it started working for different parts of the application where used.