フローティングラベル

フローティングラベル付きフォームコントロールを :placeholder-shown 疑似要素を介して構築。最新のChrome、Safari、FirefoxとIE 10/11 (prefixed)で動作。

Emailアドレス

パスワード

記憶する

html,
body {
	height: 100%;
}

body {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #f5f5f5;
}

.form-signin {
	width: 100%;
	max-width: 420px;
	padding: 15px;
	margin: auto;
}

.form-label-group {
	position: relative;
	margin-bottom: 1rem;
}

.form-label-group input,
.form-label-group label {
	height: 3.125rem;
	padding: .75rem;
}

.form-label-group label {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	margin-bottom: 0; /* デフォルトの `<label>` margin を上書き */
	line-height: 1.5;
	color: #495057;
	pointer-events: none;
	cursor: text; /* labelの下のinputと一致させる */
	border: 1px solid transparent;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
	color: transparent;
}

.form-label-group input::-moz-placeholder {
	color: transparent;
}

.form-label-group input:-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::placeholder {
	color: transparent;
}

.form-label-group input:not(:-moz-placeholder-shown) {
	padding-top: 1.25rem;
	padding-bottom: .25rem;
}

.form-label-group input:not(:-ms-input-placeholder) {
	padding-top: 1.25rem;
	padding-bottom: .25rem;
}

.form-label-group input:not(:placeholder-shown) {
	padding-top: 1.25rem;
	padding-bottom: .25rem;
}

.form-label-group input:not(:-moz-placeholder-shown) ~ label {
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: 12px;
	color: #777;
}

.form-label-group input:not(:-ms-input-placeholder) ~ label {
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: 12px;
	color: #777;
}

.form-label-group input:not(:placeholder-shown) ~ label {
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: 12px;
	color: #777;
}

.form-label-group input:-webkit-autofill ~ label {
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: 12px;
	color: #777;
}

/* Edge用フォールバック
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
	.form-label-group {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}

	.form-label-group label {
		position: static;
	}

	.form-label-group input::-ms-input-placeholder {
		color: #777;
	}
}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>フローティングラベル</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
	//cssファイルの設定など
</head>

<body>
	<form class="form-signin">
		<div class="text-center mb-4">
			<img class="mb-4" src="../images/bootstrap-solid.svg" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal">フローティングラベル</h1>
			<p>フローティングラベル付きフォームコントロールを <code>:placeholder-shown</code> 疑似要素を介して構築。<a href="https://caniuse.com/#feat=css-placeholder-shown">最新のChrome、Safari、FirefoxとIE 10/11 (prefixed)で動作。</a></p>
		</div>

		<div class="form-label-group">
			<input type="email" id="inputEmail" class="form-control" placeholder="Emailアドレス" required autofocus>
			<label for="inputEmail">Emailアドレス</label>
		</div>

		<div class="form-label-group">
			<input type="password" id="inputPassword" class="form-control" placeholder="パスワード" required>
			<label for="inputPassword">パスワード</label>
		</div>

		<div class="checkbox mb-3">
			<label>
				<input type="checkbox" value="remember-me"> 記憶する
			</label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit">サインイン</button>
		<p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2020</p>
	</form>

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
	//JavaScriptプラグインの設定など
</body>

</html>

閉じる