How To Change Placeholder Color Using Javascript
The ::placeholder
pseudo element (or a pseudo class, in some cases, depending on the browser implementation) allows you to style the placeholder text of a form element. As in, the text set with the placeholder
attribute:
<input type="email" placeholder="[email protected]">
You lot can style that text across virtually browsers with this smattering of vendor-prefixed selectors:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pinkish; } ::-moz-placeholder { /* Firefox 19+ */ color: pink; } :-ms-input-placeholder { /* IE 10+ */ color: pinkish; } :-moz-placeholder { /* Firefox 18- */ color: pink; }
Important alarm: this syntax is non-standard, thus all the naming craziness. It doesn't appear in the spec at all. :placeholder-shown
is standard, and even spec authors seem to recall ::placeholder
will be the standardized version.
Like any psuedo, you can scope information technology to specific elements equally needed, like:
input[type="email"].large-dog::-webkit-input-placeholder { color: orange; }
Demo
The difference between :placeholder-shown
and ::placeholder
:placeholder-shown
is for selecting the input itself when information technology's placeholder text is being shown. As opposed to ::placeholder
which styles the placeholder text.
Here'due south a diagram:
I found this highly confusing as:
- the specs only accept
:placeholder-shown
and non::placeholder
-
:placeholder-shown
can yet affect the styling of the placeholder text, since it'south a parent element (e.thou. font-size).
Note that :placeholder-shown
is a pseudo course (it'southward an element in a particular state) and ::placeholder
is a pseudo element (a visible matter that isn't really in the DOM). Distinguishable by single-versus-double colons.
Tab Atkins cleared it up for me via e-mail:
:placeholder-shown, being a pseudo-class, has to select an existing element – information technology selects the input whenever y'all're in the placeholder-showing state. The ::placeholder pseudo-element wraps the actual placeholder text.
Element or class?
This functionality is not standardized. That means that every browser has a unlike thought on how it should work.
Firefox originally implemented this as a pseudo grade, but changed it for a agglomeration of reasons. To brand a long story brusque, yous tin't practise as much with a pseudo form.
For instance, if yous want to change the color of the text when the input is focused. You would use a selector like input:focus::placeholder
, which you wouldn't be able to do with a pseudo course (they don't stack the same way).
IE10 supports this as a pseudo class, rather than an chemical element. Everyone else has implemented a pseudo element.
Firefox placeholder color
You might notice how in Firefox the color of the placeholder looks faded when compared to other browsers. In the paradigm below, Firefox 43 is shown on the left whilst Chrome 47 is shown on the right:
This is considering, by default, all placeholders in Firefox have an opacity value applied to them, so in order to set up this we demand to reset that value:
::-moz-placeholder { opacity: 1; }
You can come across more by testing this demo out in Firefox.
Supported Styles
The pseudo element supports styling of these properties:
-
font
backdrop -
color
-
background
properties -
discussion-spacing
-
letter of the alphabet-spacing
-
text-decoration
-
vertical-align
-
text-transform
-
line-height
-
text-indent
-
opacity
The pseudo course supports nigh (if not all) of these properties also, but isn't as flexible for the reasons outlined above.
Browser support
Desktop
Chrome | Firefox | IE | Border | Safari |
---|---|---|---|---|
57 | 19* | No | 79 | ten.one |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
101 | 100 | 101 | 10.3 |
Other resources
- MDN Docs
- "The CSS3 Placeholder Pseudo-chemical element" past Guil Hernandez
- "Styling HTML placeholder attribute" past Mounir Lamouri
- "Styling Placeholders" past Tab Atkins
How To Change Placeholder Color Using Javascript,
Source: https://css-tricks.com/almanac/selectors/p/placeholder/
Posted by: stephensgoolifter.blogspot.com
0 Response to "How To Change Placeholder Color Using Javascript"
Post a Comment