Style a form's placeholder text

Author Posts

johannesodeg

Hi, I am not able to style a form placeholder text. Can I use Microthemer for that? I have tried but with no success.

https://forhandlere.intramed.no/search-test-2/

regards
Johannes


Sebastian

Hey,

I had to Google that one. I found some information here: https://css-tricks.com/almanac/selectors/p/placeholder/

It’s a bit fiddly. I would recommend pasting the code below via Microthemer’s full code editor (View > Code editor). You need to use the :placeholder pseudo selector. Unfortunately this hasn’t standardised yet. And so in order to get this working across many browsers, you will need to repeat your styles for each vendor-specific selector:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

If you know SASS, you could enable support for it via the MT preferences and then write a mixin to save some repetition. But if you don’t know SASS, a little repetition is probably the simplest approach.

Cheers,
Sebastian


johannesodeg

Thank you Sebastian!

Regards
Johannes

You must login or register to reply to this topic.