Как я могу центрировать заполнитель и курсор текстового поля после сжатия текста заполнителя? - PullRequest
Новая
       0

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

0 голосов
/ 28 февраля 2020

У меня есть текстовое поле ввода с текстом заполнителя внутри; прямо сейчас я сжимаю текст заполнителя так, чтобы он все еще был виден, когда текстовое поле находится в фокусе, но когда я сжимаю его, и, несмотря на вертикальный перевод, текст заполнителя находится слишком близко к верхней части поля ввода.

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

// Мое текстовое поле ввода: 

<input
  type="text"
  className={errors.email && errors.email.length !== 0 ? 'bad-input' : ''}
  value={this.state.email}
  onChange={this.update('email')}
  placeholder="Email"
/>

// Мой стиль, чтобы уменьшить текст заполнителя: 

.login-modal-wrapper form .main-content-wrapper input[type="text"]:focus::placeholder,
.login-modal-wrapper form .main-content-wrapper input[type="password"]:focus::placeholder {
  font-size: 12px;
  transform: translateY(-20px);
  transition: all 0.5s;
}

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Для горизонтального центра, вы должны использовать text-align:center.

Для вертикальных настроек, вам нужно установить их вручную, но есть 2 варианта:

  1. Вы можете настроить отступы текстового поля; padding-top:10px; или padding-top:40%;

  2. Настройка высоты строки текста внутри текстового поля; line-height:20px;.

0 голосов
/ 28 февраля 2020

Я прочитал ваш вопрос еще раз, на этот раз я понял, что, регулируя размер шрифта заполнителя, будет влиять на его вертикальное выравнивание относительно текста внутри поля ввода.

Вы можете настроить псевдокласс заполнителя используя position:relative и изменяя свойство top;

См. пример ниже; 

input::placeholder {
  position: relative;
  top: 30px;
  font-size: 100px;
}
<!DOCTYPE html>
<html>

<body>
  <form action="/action_page.php">
    <label for="fname">First name:</label>
    <input style="height:100px; width:200px;" type="text" id="fname" placeholder="test" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...