How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?
By the way...if anyone is interested...I found a nice elegant solution that is a jQuery plugin that is SOOO nice.
It literally is one line of jQuery, a minified js plugin, along with a simple class name on the input.
http://labs.thesedays.com/projects/jquery/clearfield/
It's the most beautiful thing I have discovered, next to 'Placeholder' in html.
How do I make a placeholder for a 'select' box?
A non-CSS - no JavaScript/jQuery answer:
<label>Option name
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
</label>
Adding HTML5 query selector to browsers dont't support it
You can simply use the original Sizzle engine which jQuery uses (written by John Resig, author of jQuery).
Here's Sizzle's own description:
A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.
If you want to be sure that you don't use Sizzle
if querySelectorAll
is natively supported (even though Sizzle will always use querySelectorAll
when available), use this:
if ( ! document.querySelectorAll ) document.querySelectorAll = Sizzle;
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;
}
Placeholder doesn't disappear upon focus in Chrome
Firefox and chrome(and safari) act different on HTML5 placeholders. If you want chrome to disappear the placeholders on focus, you can use following script:
$('input:text, textarea').each(function(){
var $this = $(this);
$this.data('placeholder', $this.attr('placeholder'))
.focus(function(){$this.removeAttr('placeholder');})
.blur(function(){$this.attr('placeholder', $this.data('placeholder'));});
});
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!">
HTML5 placeholder disappears on focus
Stefano J. Attardi wrote a nice jQuery plugin that just does that.
It is more stable than Robert's and also fades to a lighter grey when the field gets focused.
- See the demo page
- Grab it on GitHub
- Play with the fiddle
I modified his plugin to read placeholder
attribute as opposed to manually creating a span
.
This fiddle has complete code:
HTML
<input type="text" placeholder="Hello, world!">
JS
// Original code by Stefano J. Attardi, MIT license
(function($) {
function toggleLabel() {
var input = $(this);
if (!input.parent().hasClass('placeholder')) {
var label = $('<label>').addClass('placeholder');
input.wrap(label);
var span = $('<span>');
span.text(input.attr('placeholder'))
input.removeAttr('placeholder');
span.insertBefore(input);
}
setTimeout(function() {
var def = input.attr('title');
if (!input.val() || (input.val() == def)) {
input.prev('span').css('visibility', '');
if (def) {
var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
input.prev('span').css('margin-left', dummy.width() + 3 + 'px');
dummy.remove();
}
} else {
input.prev('span').css('visibility', 'hidden');
}
}, 0);
};
function resetField() {
var def = $(this).attr('title');
if (!$(this).val() || ($(this).val() == def)) {
$(this).val(def);
$(this).prev('span').css('visibility', '');
}
};
var fields = $('input, textarea');
fields.live('mouseup', toggleLabel); // needed for IE reset icon [X]
fields.live('keydown', toggleLabel);
fields.live('paste', toggleLabel);
fields.live('focusin', function() {
$(this).prev('span').css('color', '#ccc');
});
fields.live('focusout', function() {
$(this).prev('span').css('color', '#999');
});
$(function() {
$('input[placeholder], textarea[placeholder]').each(
function() { toggleLabel.call(this); }
);
});
})(jQuery);
CSS
.placeholder {
background: white;
float: left;
clear: both;
}
.placeholder span {
position: absolute;
padding: 5px;
margin-left: 3px;
color: #999;
}
.placeholder input, .placeholder textarea {
position: relative;
margin: 0;
border-width: 1px;
padding: 6px;
background: transparent;
font: inherit;
}
/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.placeholder input, .placeholder textarea { padding: 4px; }
}
Related Topics
Vertically Center and Left-Align a Column of Flex Items
Word-Wrap Break-Word Does Not Work in This Example
How to Send Mail with a Subject Using a Mailto Url
CSS: Display:Block; Vs Display:Table;
Why Does Perspective Changes Fixed Position in CSS
Flexbox: Align Between Bottom and Center
Bootstrap 4: Navbar with Logo and 2 Rows
Applying CSS Styles to All Elements Inside a Div
Why Does Display: Inline-Block; Remove an Underline from a Child Element
Load a Low-Res Background Image First, Then a High-Res One
What Does It Mean When The Form Action Attribute Is "#" (Number/Pound Symbol/Sign/Character)
HTML.Beginform() with an Absolute Url
HTML to Nsattributedstring and Nsattributedstring to HTML
Has Anyone Gotten HTML Emails Working with Twitter Bootstrap