Felder in Formularen
In einigen Anmeldeformulren steht ein Platzhalter. Wenn man in das entsprechende Feld klickt wandert der Platzhaltertext nach links oben in einer kleineren Schrift. Kennt jemand ein Script oder eine CSS Variante um solch eine Lösung in HTML5 einzubauen.
Der hier verwendete Code
<html>
<head>
<title>Input animation</title>
<style>
body{
text-align:center;
background:#121234;
}
#alles{
margin-top:100px;
}
.label-box {
display: block;
position: relative;
left:20px;
width: 470px;
}
input {
width: 370px;
padding: 5px;
font-size: 18px;
margin-top: 10px;
border: none;
border-bottom: 1px solid #757575;
}
input:focus {
outline: none;
}
label {
font-size: 22px;
color: black;
pointer-events: none;
position: absolute;
top: -28px;
transition-property: all;
transition-duration: 0.2s;
}
input:focus + .label-box label,
input:valid + .label-box label {
font-size: 10px;
color:white;
transform: translateY(-22px);
}
textarea{
width:80%;
height:300px;
}
h2{
color:white;
}
</style>
</head>
<body>
<div id="alles">
<input type="text" required>
<div class="label-box">
<label>Gebe dein Namen ein</label>
</div>
</div>
</body>
</html>