How to change input's placeholder color in HTML5?

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

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;
}

 

Google to Announce .dev Top-Level Domain

Application acception for a new domain will begin in January 2019
13 November 2018   306

At the summit of developers Chrome Dev Google representatives briefly announced the imminent opening of the registration of names for the top-level domain .dev. Application acception will begin in January 2019.

From January 16 to February 19, 2019, brand and trademark owners will have the opportunity to register a domain name with their trademark. From February 19 to 28 there will be an early access stage with a higher price. And from February 28, access will be open to anyone.

As noted, the .dev domain, like the previously opened .app, will receive support for the HTTPS protocol by default. A more detailed description of the domain zone is available on the official website.

In May 2018, Google announced the public registration in the domain zone .app - in the first top-level domain, which allows only secure connections. And in October 2018, early registration began in the .page zone. Unlike .app and .dev, which are designed for developers, the .page zone is focused on personal pages, business and thematic sites. The domain also supports only secure channels.