How to change input's placeholder color in HTML5?

Few code tricks with input's placeholder color in HTML5
31 August 2017   280

There are 2 ways to do it:

  • pseudo-elements 
  • pseudo-classes

Let's see what methods popular browsers use.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder.
  • Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon).
  • Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while.
  • Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder.
  • Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector.

So you need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

 

What is HEML?

Small introduction to a new open source markup language for building responsive email
30 October 2017   335

What is HEML?

HEML is an open source markup language for building responsive email. It gives you the native power of HTML without having to deal with all of the email quirks. HEML makes building emails as easy as building websites.

HEML is built on 3 core principles. Each decision about the architecture and element design is made with these in mind.

  • Native Feel
    If you know HTML and CSS, you will get started with this programming language fast
     
  • Forward Thinking
    HEML is designed to take advantage of all that email can do while still providing a solid experience for all clients
     
  • Extendable
    You can create your own powerful elements and style rules. Share them with the world, or keep 'em to yourself

Code example 

<heml>
  <head>
    <subject>Email Rox!</subject>
    <style>
      body { background: SkyBlue; }
      h1 { color: DarkViolet; }
    </style>
  </head>
  <body>
    <container>
      <marquee><h1>Hello world </h1></marquee>
    </container>
  </body>
</heml>

Links

If you are interested, visit:

  • GitHub
  • Website
  • Docs
  • Online editor