How to change input's placeholder color in HTML5?

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

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

 

Frontend News Digest 24 - 30.08

New and experimental CSS Firefox tools, Node.js' new current version update, deep dive to its internals and many other interest things awaits you
29 August 2019   1042

Greetings! I hope your week went great! Here's new Frontend news digest.

In this digest, you will learn how to release custom react component, hook or an effect as an npm Package, learn about the powers of HTML5 storage that allos you to create shopping card and about new experimental CSS tools in Firefox. Also, Node.js v12.9.1 is out.

Guides

  • Creating A Shopping Cart With HTML5 Web Storage

This guide will teach you how to use the HTML Web Storage powers to create a shopping card step-by-step

  • How to Release a Custom React Component, Hook or Effect as an npm Package

Author believes he find a way how to release hook, custom component of React of an Effect as an npm Package in a more easier way than always

Article

  • Faster Image Loading With Embedded Image Previews 

EIP technology described in this post allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests with no additional data transered.

  • Node v12.9.1 (Current)

Small release fixes 2 regressions in the http module

Video

  • New & Experimental CSS Tools in Firefox
     

UX designer at Mozilla Firefox Developer Tools team talks about cool new and even experimental CSS Tools in popular browser

  • A Journey into Node.js Internals

Tamar Twena-Stern spoke about the internals of the one of the most popular JavaScript's runtime environments

Updates

  • monolith

Solution allows to sale any web page into as a single HTML file with enbedded CSS, image, and JavaScript assets all at  a single HTML5 doc

  • radialMenu

Easy to set up (according to the developers) and customizable JS menu

  • Data Table Component

Includes a lot of features, and, according to the developers, is simple, sortable and flexible

  • React Webcam

A component to work with webcams for React