Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set placeholder value using CSS?

I want to set the placeholder value of an input box using only CSS and no JavaScript or jQuery.

How can I do this?

like image 771
n92 Avatar asked Nov 10 '11 07:11

n92


People also ask

Can you set placeholder in CSS?

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.

How do I change placeholder style in CSS?

<input type="text" placeholder="A red placeholder text..">

How do you style a 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.

What is placeholder shown in CSS?

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.


2 Answers

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/

like image 83
Charles Avatar answered Sep 20 '22 21:09

Charles


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.

like image 32
Sarfraz Avatar answered Sep 22 '22 21:09

Sarfraz