I want to set the placeholder value of an input box using only CSS and no JavaScript or jQuery.
How can I do this?
CSS ::placeholder SelectorThe ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.
<input type="text" placeholder="A red placeholder text..">
Use the ::placeholder pseudo-element to style your placeholder text in an <input> or <textarea> form element. Most modern browsers support this, but for older browsers, vendor prefixes will be required.
The :placeholder-shown pseudo-class selects the input element itself when placeholder text exists in a form input. Think of it as a nice way to distinguish between inputs that are currently showing placeholder text versus those that are not.
You can do this for webkit:
#text2::-webkit-input-placeholder::before { color:#666; content:"Line 1\A Line 2\A Line 3\A"; }
http://jsfiddle.net/Z3tFG/1/
AFAIK, you can't do it with CSS alone. CSS has content
rule but even that can be used to insert content before or after an element using pseudo selectors. You need to resort to javascript for that OR use placeholder
attribute if you are using HTML5 as pointed out by @Blender.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With