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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!