How to set placeholder value using CSS?

Question

I want to set the placeholder value of an input box using only css and not JavaScript or jQuery. How can I do this?

Answer 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.

Answer 2

Change your meta tag to the one below and use placeholder attribute inside your HTML input tag.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<input type="text" placeholder="Placeholder text" />​

Answer 3

Some type of input hasn't got the :after or :before pseudo-element, so you can use a background-image with an SVG text element:

    input {
       background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='gray' font-size='15'>Type Something...</text></svg>");
       background-repeat: no-repeat;
    }

    input:focus {
       background-image: none;
    }

My codepen: https://codepen.io/Scario/pen/BaagbeZ