У меня есть форма входа в систему HTML, и я стараюсь достичь того же стиля, который Google теперь имеет в своих формах входа в систему (2019-2020). Первая фотография, когда не нажимается, вторая фотография при нажатии. /> < /p>
Я попробовал следующий подход, но мне не нравится результат.
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>
Это не совсем то, чего я хотел бы достичь, и когда я пытаюсь сделать это отзывчивым с различными размерами экрана, текст в < /strong> на неверных местах трудно разместить его. Если бы кто -то мог бы помочь достичь того, что я показываю на изображениях, это было бы удивительно.
заранее. < /P>
Подробнее здесь: https://stackoverflow.com/questions/610 ... nput-field
