hozaka/float-label-pattern.html

## float-label-pattern.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<title>Float Label Pattern</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<style type="text/css" media="screen">
		.row {
			/*position: relative;*/
			padding-top: 24px;
		}
		input[type] {
			/*margin-top: 24px;*/
			transition: 0.5s;
		}
		label {
			color: rgba(0,0,255, 0);
			position: absolute;
			margin-top: -50px;
			transition: 0.5s;
			font-size: 12px;
		}
		input[type]:focus + label {
			margin-top: -55px;
			transition: 0.5s;
		}
		input[type]:focus:valid + label {
			color: rgba(0,150,255, 1);
		}
		input[type]:focus:invalid + label, input[type]:invalid {
			color: rgba(255,69,0, 1);
		}
		input[type]:focus:valid + label:after {
			content: "✓";
			margin-left: 0.5em;
		}
		input[type]:valid + label {
			margin-top: -55px;
			color: rgba(200,200,200, 1);
		}
		article {
			margin-top: 1em;
		}
	</style>
</head>
<body>

<div class="container">
	<h1>Float Label Pattern Demo</h1>

	<form action="#" method="get" accept-charset="utf-8" role="form">
		<div class="row">
			<div class="col-xs-2">
				<input type="email" class="form-control" id="email" placeholder="Enter email" required>
				<label for="email">Email address</label>
			</div>
			<div class="col-xs-2">
				<input type="password" class="form-control" id="password" placeholder="Enter password" required>
				<label for="password">Password</label>
			</div>
			<div class="col-xs-2">
				<button type="submit" class="btn btn-primary">OK</button>
			</div>
		</div>
	</form>

	<article>
		<!-- <h2>Highlights</h2> -->
		<ul>
			<li>No label for normal status</li>
			<li>Red label for invalid inputs</li>
			<li>Blue label for valid, focused inputs</li>
			<li>Gray label for valid inputs</li>
		</ul>

		<p><a href="https://twitter.com/hozaka">@hozaka</a></p>
	</article>

</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<title>Float Label Pattern</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<style type="text/css" media="screen">
	.row {
	/position: relative;/
	padding-top: 24px;
	}
	input[type] {
	/margin-top: 24px;/
	transition: 0.5s;
	}
	label {
	color: rgba(0,0,255, 0);
	position: absolute;
	margin-top: -50px;
	transition: 0.5s;
	font-size: 12px;
	}
	input[type]:focus + label {
	margin-top: -55px;
	transition: 0.5s;
	}
	input[type]:focus:valid + label {
	color: rgba(0,150,255, 1);
	}
	input[type]:focus:invalid + label, input[type]:invalid {
	color: rgba(255,69,0, 1);
	}
	input[type]:focus:valid + label:after {
	content: "✓";
	margin-left: 0.5em;
	}
	input[type]:valid + label {
	margin-top: -55px;
	color: rgba(200,200,200, 1);
	}
	article {
	margin-top: 1em;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<h1>Float Label Pattern Demo</h1>

	<form action="#" method="get" accept-charset="utf-8" role="form">
	<div class="row">
	<div class="col-xs-2">
	<input type="email" class="form-control" id="email" placeholder="Enter email" required>
	<label for="email">Email address</label>
	</div>
	<div class="col-xs-2">
	<input type="password" class="form-control" id="password" placeholder="Enter password" required>
	<label for="password">Password</label>
	</div>
	<div class="col-xs-2">
	<button type="submit" class="btn btn-primary">OK</button>
	</div>
	</div>
	</form>

	<article>
	<!-- <h2>Highlights</h2> -->
	<ul>
	<li>No label for normal status</li>
	<li>Red label for invalid inputs</li>
	<li>Blue label for valid, focused inputs</li>
	<li>Gray label for valid inputs</li>
	</ul>

	<p><a href="https://twitter.com/hozaka">@hozaka</a></p>
	</article>

	</div>

	</body>
	</html>