Login/Register
Need to add some padding-top on a placeholder of a text area
Asked Answered
cssplaceholder
E

6

7

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?

Erminiaerminie answered 26/11, 2014 at 10:10 Comment(4)
please share your code (HTML and CSS) – Fulgurite
OP, please see my latest edit, i understand what you're after now – Cornuted
Because you got the answer from me. – Antifebrile
@Antifebrile not the situation at all, please check your notification – Cornuted
C
7

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/

Cornuted answered 26/11, 2014 at 10:12 Comment(2)
Sorry @Gezzasa, no i honestly just wanted to add this to it, i didnt realise yours was the same after you edited the color out. I was just concentrating on my own answer – Cornuted
not a problem, thank you. It just looked a bit suspect to me. I guess the notifications come in a little late. Apologies. – Antifebrile
A
3

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/

Antifebrile answered 26/11, 2014 at 10:18 Comment(5)
This doesn't answer the question at all – Cornuted
So all you want to do is add padding to it? .message {padding-top: 10px} – Antifebrile
It's not my question, but the OP wants padding-top, which is stated in the title. Also, 10px isn't specified by the OP, it's an amount i chose to exhibit how the code will work – Cornuted
And to clarify, my original answer did answer his question. "But was interested about thee styling of placeholder with a css3 seelctor. any help?" My answer showed how to style a specific placeholder with a class of message. With that he could have changed the 'color:red' to whatever he needed it to be. – Antifebrile
@AndyHolmes Why would you edit your answer after mine with the correct info? – Antifebrile
A
1

Use this CSS:

textarea {
    padding-top: 14px;
    font-size: 1.0rem;
}

textarea::-webkit-input-placeholder {
    padding-top: 0px;
}

textarea::-moz-placeholder {
    padding-top: 0px;
}

textarea::-ms-input-placeholder {
    padding-top: 0px;
}
Atrophy answered 13/8, 2019 at 6:19 Comment(0)
D
0

Just apply CSS for that class...

.message{padding-top:10px;}

Or 

padding:10px;

If you want to apply padding on all sides

AND apply it to text area:

<textarea class="message"></textarea>
Deflocculate answered 26/11, 2014 at 10:15 Comment(0)
K
0

You Can Try this .Its working Fine and Tested !!!

<body>
<textarea placeholder = "Enter Your Stuff Here !! Area" class "message"></textarea>
</body>

And you can Add css to class as Follows:

.message  {
    padding-top : 12px;
  }
Kamerun answered 29/2, 2020 at 6:30 Comment(0)
O
-1

Give your text area an ID and use that to assign css rules.

e.g.

(html)

<textarea id="thisOne" style="message">

(css)

#thisOne -moz-placeholder {
   padding: 5px 0 0 0;
}
Oodles answered 26/11, 2014 at 10:15 Comment(1)
while this is fine, using an ID to target a specific text area, there's no need for -moz-. Also, utilising the class is better – Cornuted

© 2022 - 2024 — McMap. All rights reserved.