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

Как выровнять содержимое заполнителя внутри TextArea?

  • 772

Что ж, моя проблема в том, что у меня есть <textarea>на моей странице, и я использую атрибут placeholder=, чтобы присвоить ему пользовательское значение , например: <textarea id="usuario_nick" placeholder="usuario">

Проблема в том, что текст внутри текстового поля автоматически выравнивается по левому краю, но я хочу, чтобы он был выровнен по центру текстового поля. Я не имею в виду только по горизонтали и по вертикали прямо в центре. Возможно ли это? Есть ли способ переместить только значение заполнителя в этом текстовом поле как padding-top y right?.

Я знаю, что вы можете принять placeholderаферу , ::-webkit-input-placeholderно это касается всех, и я хочу, чтобы это произошло только на одном конкретном.

html

2 Answers

  1. Best Answer

    Я знаю, что вы можете захватить заполнитель с помощью ::-webkit-input-placeholder, но это захватит их все, и я хочу, чтобы это произошло только на одном конкретном.

    Вам просто нужно поставить тот , selectorна который вы хотите изменить файл pseudo-elemento ::placeholder. Это selectorможет быть класс ( eg: .miclase), идентификатор ( eg: #miId) и т. д.

    Я хочу, чтобы он был выровнен по центру текстовой области. Я не имею в виду только по горизонтали и по вертикали прямо по центру. Возможно ли это?

    Чтобы выровнять его по вертикали, вы можете указать heightопределенное значение для , textareaа затем такое же значение для line-heightdel placeholder.

    Есть ли способ переместить только значение заполнителя в этом текстовом поле в виде верхнего и правого отступов?

    Да, вам просто нужно указать тот padding-top, который вы хотите применить.

    Например:

    .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. Вы можете получить доступ по id.

    Это будет код:

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

    • 4