Я пытаюсь поместить заполнителя на границе поля ввода ⇐ CSS

[Anonymous]

У меня есть форма входа в систему HTML, и я стараюсь достичь того же стиля, который Google теперь имеет в своих формах входа в систему (2019-2020). Первое фото, когда не нажимает, вторая фотография при нажатии. /Wdc57.png " />
< /p>

Я попробовал следующий подход, но мне не нравится результат. class = "Snippet-Code">


E-mailaddress or phonenumber


< /code>
< /div>
< /div>
< /p>

На официальной странице входа в Google, заполнителе »слайды "На границе при нажатии. Если я не могу достичь этого без использования JavaScript, то это не вариант для меня, так как я делаю страницу портала CPD. Это не позволяет javaScript < /strong>. < /P>

Текст не должен быть виден на границе, когда поле ввода не нажимается, и он должен быть виден Когда поле ввода нажимается и когда пользователь печатает.

body {
background-color: #ccc;
}

input {
border: 1px solid #000
width: 200px;
padding: 20px;
font-size: 20px;
}

#myInput::-webkit-input-placeholder {

border-style:solid;
border-width:medium;
}
#myInput:-moz-placeholder {
border-style:solid;
border-width:medium;
}
#myInput:-ms-input-placeholder {
border-style:solid;
border-width:medium;
}< /code>
< /code>
< /div>
< /div>
< /p>

Это не совсем то, что я хотел бы достичь , и когда я пытаюсь сделать это отзывчивым с разными размерами экрана, текст в граница попадает в неправильные места, и трудно его разместить. Если бы кто -то мог бы помочь достичь того, что я показываю на изображениях, это было бы удивительно.
заранее. < /P>

Подробнее здесь: https://stackoverflow.com/questions/610 ... nput-field