Style a form's placeholder text

Author Posts

johannesodeg

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

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.