Need to add some padding-top on a placeholder of a text area

Question

I know about how to stylize the placeholder from here css tricks

But I need to know about how to apply to a specific text area.My text-area has class "message".

Thanks.

Actually I used padding.But was interested about thee styling of placeholder with a css3 seelctor.

any help?

Answer 1

All you need is .message { padding-top: 10px; } to achieve the result you're after.

It will apply to any <textarea> that has the class of message

EDIT

If you don't want to apply padding to the element, try this instead. It literally just targets the placeholder.

.message::-webkit-input-placeholder {
   padding-top: 10px;
}

.message::-moz-input-placeholder {
   padding-top: 10px;
}

.message:-moz-input-placeholder {
   padding-top: 10px;
}

.message:-ms-input-placeholder {
   padding-top: 10px;
}

Can be seen in action here, I set up 2 <textarea>'s to show this - http://jsfiddle.net/andyjh07/tan7k4rf/

Answer 2

This what you are looking for?

<textarea  placeholder="Placeholder text!" class="message"></textarea>
<textarea  placeholder="Placeholder text!" ></textarea>

.message::-webkit-input-placeholder {padding-top: 10px;}
.message:-moz-placeholder { /* Firefox 18- */padding-top: 10px;}
.message::-moz-placeholder {  /* Firefox 19+ */padding-top: 10px;}
.message:-ms-input-placeholder {padding-top: 10px;}

http://jsfiddle.net/92gnt7qt/3/