Создайте плавающее текстовое поле, например Gmail, используя Google Material Design Lite. - PullRequest
Новая
       11

Создайте плавающее текстовое поле, например Gmail, используя Google Material Design Lite.

0 голосов
/ 27 марта 2020

Я использую библиотеку Material design lite и пытаюсь создать плавающее текстовое поле, подобное тому, что есть у Google для Gmail. Я не нашел никакой документации для компонента, однако я попробовал приведенный ниже код 

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
     <input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
     <label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>

. Это создает примерно такой дизайн

enter image description here

Я пытаюсь создать текстовое поле примерно так:

enter image description here

Есть ли способ создать этот дизайн?

1 Ответ

0 голосов
/ 29 марта 2020

Вот что я создал: 

<div id="googleLogIn" style="position:absolute;">
 <input type="text" style="border:6px solid blue;height:35px;width:300px;position:absolute;top:50px;" 
 placeholder="">
 <p style="background-color:white;width:100px;position:absolute;left:20px;top:25px;padding:3px;">
 Email or phone</p>
</div>

Это делает что-то близкое к тому, что вы хотите.

...