Depot43-Unterlagen - Form Float Label

HTML Elemente
            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Form Float Label</title>
	<style>
* {
	box-sizing: border-box;
}
html {
	font: 14px/1.4 Sans-Serif;
}
form {
	width: 320px;
	float: left;
	margin: 20px;
}
form > div {
 	position: relative;
	overflow: hidden;
}
form input {
	width: 100%;
	border: 2px solid gray;
}
form input:valid {
	background: white;
}
form input:focus {
	border-color: red;
}
form input:focus + label {
	background: red;
	color: white;
	font-size: 70%;
	padding: 1px 6px;
	z-index: 3;
	text-transform: uppercase;
}
form label {
 	transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
 	position: absolute;
	color: #999;
	padding: 7px 6px;
	z-index:2;
}
form.go-bottom input {
	padding: 12px;
}
form.go-bottom label {
 	top: 0px;
 	left: 0;
 	width: 100%;
}
form.go-bottom input:focus {
 	padding: 4px 6px 20px 6px;
}
form.go-bottom input:focus + label {
	top: 100%;
	margin-top: -16px;
}
	</style>
</head>
<body>
	<form class="go-bottom">
		<h2>To Bottom</h2>
		<div>
			<input id="name" name="name" type="text"><label for="name">Vorname</label>
		</div>
		<div>
			<input id="surname" name="suename"><label for="surname">Nachname</label>
		</div>
		<div>
			<input id="phone" name="phone" type="tel"><label for="phone">Telefon</label>
		</div>
	</form>
</body>
</html>


 

            
Form Float Label

Hinweis
