Как создать форму ввода дизайна материала, используя css и bootstrap? - PullRequest
Новая
       76

Как создать форму ввода дизайна материала, используя css и bootstrap?

2 голосов
/ 21 ноября 2019

Я хочу спроектировать следующую форму ввода материала, используя css и bootstrap. Следующий код, который я сейчас использую. Но это не дает точного результата, который я хочу.

Код Pen Link: Просмотреть исходный код здесь

HTML-КОД: 

<div class="container">

  <h2>Google Material Design in CSS3<small>Inputs</small></h2>

  <form>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>

  </form>

  <p class="footer">
    a <a href="https://scotch.io/tutorials/css/google-material-design-input-boxes-in-css3" target="_blank">tutorial</a> by <a href="https://scotch.io" target="_blank">scotch.io</a>
  </p>

</div>

НоЯ хочу этот дизайн:

enter image description here

1 Ответ

1 голос
/ 21 ноября 2019

Поскольку вы пометили Bootstrap 4, я предполагаю, что вы хотели найти решение в отношении этой платформы.

Установите группу форм по умолчанию, метку и разметку ввода, как это; 

<div class="form-group">
   <label for="usr">Name:</label>
   <input type="text" class="form-control" id="usr">
</div>

Затем добавьте этот CSS, что бы он сделал:

  1. метка позиции относительно ее контейнера (группа форм)
  2. , затем мы задали верхнюю и левую позиции такчто он будет располагаться поверх поля ввода
  3. Я добавил белый фон и отступы к метке, чтобы у него было поле вокруг метки. 
.form-group > label {
  top: 18px;
  left: 6px;
  position: relative;
  background-color: white;
  padding: 0px 5px 0px 5px;
  font-size: 0.9em;
}

Вот скрипка с этим кодом на начальной загрузке 4;http://jsfiddle.net/rw29jot4/

Для анимации, проверьте эту скрипку, нам нужно использовать события щелчка и переместить позицию метки;

Обновлен код с анимацией; http://jsfiddle.net/sedvo037/

...