overriding placeholder font css in all browsers
You need to make separate declarations for it to work in all browsers, otherwise a conflict will cause undesired results like this.
h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
font-family: somefont;
}
::-webkit-input-placeholder {
font-family: somefont;
}
:-moz-placeholder {
font-family: somefont;
}
::-moz-placeholder {
font-family: somefont;
}
:-ms-input-placeholder {
font-family: somefont;
}
How to solve placeholder CSS difference across different browsers?
I've made a little fiddle a while ago because of this weird pseudo-element, the result ? You can't add a coma between the selector, you have to specify your rule twice, that's a shame.
The HTML:
<input type="text" id="test-webkit" placeholder="test-webkit" /><br />
<input type="text" id="test-moz" placeholder="test-moz" /><br />
<input type="text" id="test-both" placeholder="test-both" /><br />
<input type="text" class="test-both" placeholder="test-both-separately" />
The CSS:
/* Works on Webkit */
#test-webkit::-webkit-input-placeholder {
color: red;
}
/* Works on Firefox */
#test-moz:-moz-placeholder {
color: red;
}
/* Don't work */
#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder {
color: red;
}
/* Works on both */
.test-both::-webkit-input-placeholder {
color: red;
}
.test-both:-moz-placeholder {
color: red;
}
The Fiddle.
Placeholder font style is coming as different for textfield and textarea
You need to set them to the same font family in the CSS:
textarea,
input[type=text] {
font-family:Arial;
}
How to override custom placeholder css
add a visible class
.visible::-webkit-input-placeholder{
color: #000 !important;
}
add the above class to the textarea's where you need to display placeholder
Placeholder CSS not being applied in IE 11
Further to what Raj answered, when using vendor prefixes the selectors need to be separated into their own rule sets for each prefix.
The reason for this is that to enable the CSS language to advance, browsers need to drop selectors or declarations they do not understand. This allows new features to be be added without the worry that old browsers will interpret it in a different way other than just dropping it.
When using the comma combinator to combine the various pseudo classes, you turn it into one selector, and the browser needs to understand the entire thing to apply that rule set.
Instead you should make a new rule set for each vendor prefixed pseudo class/element. Unfortunately it is a lot of repetition, but that is the price for using experimental CSS.
Changing an input's HTML5 placeholder color with CSS does not work on Chrome
You forget a :
.
Because of that, the whole selector got corrupted and didn't work.
http://jsfiddle.net/a96f6/87/
Edit:
Seems like (after an update?) this doesn't work anymore, try this:
input::-webkit-input-placeholder{
color:red;
}
input:-moz-placeholder {
color:red;
}
Note: don't mix the vendor prefix selectors (-moz, -webkit, -ms, ...). Chrome for example won't understand "-moz-" and then ignores the whole selector.
Edit for clarification:
To make it work in all browsers, use this code:
::-webkit-input-placeholder {
color:red;
}
::-moz-placeholder {
color:red;
}
::-ms-placeholder {
color:red;
}
::placeholder {
color:red;
}
Change a HTML5 input's placeholder color with CSS
Implementation
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
::-webkit-input-placeholder
. [Ref] - Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder
(one colon). [Ref] - Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder
, but the old selector will still work for a while. [Ref] - Internet Explorer 10 and 11 are using a pseudo-class:
:-ms-input-placeholder
. [Ref] - April 2017: Most modern browsers support the simple pseudo-element
::placeholder
[Ref]
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. See Selectors Level 3:
a group of selectors containing an invalid selector is invalid.
So we 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;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
Related Topics
CSS - Opaque Text on Low Opacity Div
Add a Twitter Share Button to Shiny R Navbar
Jqgrid Zebra/Alt Rows Background Not Working Due to UI Theme Class
Nth-Child with Mod (Or Modulo) Operator
CSS Object-Fit Cover Is Stretching a Particular Image in Chrome on MAC
Why Does Box-Sizing: Border-Box Still Show the Border with a Width of 0Px
CSS Columns Bug - 5 Column Count Only Showing 4 (With Images)
Leaving Certain Values Unchanged When Using CSS Shorthand Properties
Calculate Text Color Depending to a Background Color
How to Apply Ckeditor CSS to Output
CSS Keyframe Animation CPU Usage Is High, Should It Be This Way
Differencebetween ".Class Element" and "Element.Class"
How to Make the New Long Shadow Trend with CSS
Is It Possible in SASS to Inherit from a Class in Another File
Capsule Shape Using Border-Radius Without a Set Width or Height
How to Add a Company Logo to Shinydashboard Header (Not Mainpanel or Mainheader)