CODEWITHSUNDEEP
cssplaceholder
Valentino Langarosa
Valentino Langarosa

Reputation: 307

Add text to placeholder in css

<input type='text' />

I need to add placeholder text in css, something like this:

input:placeholder{content: 'placeholder text';}

Upvotes: 0

Views: 26666

Answers (2)

indubitablee
indubitablee

Reputation: 8206

you cant do this with css. however you can accomplish this with jQuery as shown in the demo below.

$(document).ready(function() {
    placeholders();
    function placeholders() {
        var count = 0;
        $('input[type=text]').each(function() {
            count++;
			$(this).attr('placeholder', 'value ' + count);
        });
    }
    
    $(document).on('click', '.delete', function() {
    	$(this).closest('div').remove();
        placeholders();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="text"/><button class="delete">DELETE</button>
</div>
<div>
    <input type="text"/><button class="delete">DELETE</button>
</div>
<div>
    <input type="text"/><button class="delete">DELETE</button>
</div>
<div>
    <input type="text"/><button class="delete">DELETE</button>
</div>

Upvotes: 1

IamShipon1988
IamShipon1988

Reputation: 2194

You can't set placeholders using CSS for all browsers. The only browser that supports it at the moment is webkit.

Take a look at this question: How to set placeholder value using CSS?

Upvotes: 1

Related Questions