У меня есть форма входа в систему 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
