Home / Questions / 94278
Accepted
theboshy
Asked: 2020-08-11 12:39:56 +0800 CST 2020-08-11 12:39:56 +0800 CST

How to align the content of a Placeholder inside a TextArea?

  • 772

Well my problem is that I have a <textarea>on my page and I use the attribute placeholder=to give it the user value such that: <textarea id="usuario_nick" placeholder="usuario">

The problem is that the text inside the textarea is automatically aligned to the left but I want it to be aligned towards the center of the textarea I don't mean only horizontally also vertically right in the center is it possible? Is there a way to move just the value of the placeholder in that textarea as a padding-top y right?.

I know you can take the placeholdercon ::-webkit-input-placeholderbut this takes all of them and I want it to happen only on 1 specific one.

html

2 Answers

  1. Best Answer

    I know you can grab the placeholder with ::-webkit-input-placeholder but this grabs all of them and I want it to happen only on 1 specific one.

    You just have to put the one selectoron which you want to modify the pseudo-elemento ::placeholder. The selectorcan be a class ( eg: .miclase), an id ( eg: #miId), etc.

    I want it to align towards the center of the textarea I don't mean just horizontally also vertically right in the center is that possible?

    To align it vertically you can specify a heightspecific value for the textareaand then the same value for the line-heightdel placeholder.

    Is there a way to move just the value of the placeholder in that textarea as a padding-top and right ?.

    Yes, you just have to indicate the padding-topone you want to apply.

    For example:

    .ph-center {
  height: 100px;
}
.ph-center::-webkit-input-placeholder {
  text-align: center;
  line-height: 100px;/* Centrado vertical */
}
    <textarea placeholder="usuario"></textarea>
<textarea class="ph-center" placeholder="usuario"></textarea>

    • 6

  2. You can access by id.

    This would be the code:

    #miid::placeholder {
  color: red;
  text-align: center;
  padding-top: 30px;
}
    <textarea id="miid" placeholder="placeholder" rows="5"></textarea>

    • 4