Горизонтально выравнивающий заполнитель в поле ввода - PullRequest
Новая
       0

Горизонтально выравнивающий заполнитель в поле ввода

0 голосов
/ 15 февраля 2019

Каков будет правильный подход к выравниванию заполнителя по верху поля, в то время как вводимый текст обычно отображается в середине?

Любой способ сделать это с помощью CSS только для input / :: placeholder или долженя скорее создаю оболочку с span, которая исчезнет, ​​когда active и поле ввода под ней?

Вот что из того, что у меня сейчас получилось: https://jsfiddle.net/ejsLfvdn/1/

И вот что этодолжно выглядеть так, как если бы клиенты: enter image description here

Маски ввода здесь не тот случай, я только борюсь с выравнивателем, выровненным по верху, в то время как ввод должен появитьсяобычно в середине.Заполнитель ДОЛЖЕН исчезнуть после заполнения ввода.

Ответы [ 4 ]

0 голосов
/ 15 февраля 2019

Вы можете использовать translateY(-100%) в своем заполнителе, чтобы переместить текст вверх, а затем дать вашему текстовому полю отступ в верхней части для отображения текста: 

.placeholder-offset {
  font-size: 20px;
  padding-top: 25px;
}

.placeholder-offset::placeholder {
  color: red;
  transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />
0 голосов
/ 15 февраля 2019

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

* {
  box-sizing: border-box;
}

.input {
  display: flex;
  flex-flow: column-reverse nowrap;
  border: 1px solid gray;
  width: 220px;
}

.input input:valid + label {
  opacity: 0;
}

.input input {
  width: 100%;
  padding: 10px;
  border: none;
}
<div class="input">
  <input required id="username" name="username" type="text" />
  <label for="username">Username</label>
</div>
0 голосов
/ 15 февраля 2019

Надеюсь, я достиг того, что вам нужно.

Кстати, я использовал jquery, чтобы скрыть заполнитель при вводе и отобразить его снова, если поле пустое.

$('.form-control').keyup(function(){
	var val = $(this).val();

  if(val == ""){
    $('.placeholder').show();
  }else{
    $('.placeholder').hide();
  }
});
.input-cont{
  position: relative;
}
.form-control{
  border: 1px solid #DDD;
  border-radius: 5px;
  height: 40px;
  padding-left: 8px;
}
.placeholder{
  position: absolute;
  top: 5px;
  left: 8px;
  color: #3dc185;
  font-size: 12px;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <form>
      <div class="input-cont">
        <span class="placeholder">Imię</span>
        <input class="form-control" type="text" name="name">
      </div>
    </form>
  </body>
</html>
0 голосов
/ 15 февраля 2019

Я не думаю, что вы сможете сделать это, непосредственно нацелившись на псевдокласс заполнителя (:: placeholder).

К этому элементу и позиции можно применить только небольшое подмножество CSS-свойств.не один из них:

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

Я думаю, вам нужно будет использовать подход обертки с span, input и position соответствующим образом.

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

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

...