CodePen Embed - bOpbKy

-<h1>よくあるRWDなお問い合わせフォーム改善版</h1>
<form class="h-adr">
<input type="hidden" class="p-country-name" value="Japan">
	<div class="table_basic01">
		<dl>
			<dt>お問い合わせの種類</dt>
			<dd class="form_parts01">
				<div>
					<label><input type="checkbox" name="select01" value="このブログについて">このブログについて</label>
					<label><input type="checkbox" name="select02" value="アクセシビリティについて">アクセシビリティについて</label>
					<label><input type="checkbox" name="select03" value="サイト制作について">サイト制作について</label>
					<label><input type="checkbox" name="select04" value="メディア取材について">メディア取材について</label>
					<label><input type="checkbox" name="select05" value="その他">その他</label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>お名前</dt>
			<dd>
				<span class="example01">例）出路樽 愛子</span>
				<label><input type="text" name="your-name" value="" class="" placeholder="例）出路樽 愛子"></label>
			</dd>
		</dl>
		<dl>
			<dt>お名前（ひらがな）</dt>
			<dd>
				<span class="example01">例）でじたる あいこ</span>
				<label><input type="text" name="your-name-kana" value="" class="" placeholder="例）でじたる あいこ"></label>
			</dd>
		</dl>
		<dl>
			<dt>会社名</dt>
			<dd>
				<span class="example01">例）株式会社デジタルアイデンティティ</span>
				<label><input type="text" name="company" value="" class="" placeholder="例）株式会社デジタルアイデンティティ"></label>
			</dd>
		</dl>
		<dl>
			<dt>性別</dt>
			<dd class="form_parts01">
				<div>
					<label><input type="radio" name="sex" value="未回答" checked="checked">未回答</label>
					<label><input type="radio" name="sex" value="男性">男性</label>
					<label><input type="radio" name="sex" value="女性">女性</label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>メールアドレス</dt>
			<dd>
				<span class="example01">例）sample@digitalidentity.co.jp</span>
				<label><input type="email" name="mailaddress" value="" class="" placeholder="例）sample@digitalidentity.co.jp"></label>
			</dd>
		</dl>
		<dl>
			<dt>電話番号</dt>
			<dd>
				<span class="example01">例）090-1234-5678</span>
				<label><input type="tel" name="tel" value="" class="" placeholder="例）090-1234-5678"></label>
			</dd>
		</dl>
		<dl>
			<dt class="any">郵便番号</dt>
			<dd>
				<span class="txt_advice01">郵便番号を入力すると都道府県欄と住所欄に自動で市区町村まで入力されますので続けて町名番地を入力して下さい</span>
				<span class="example01">例）1500022 または 150-0022</span>
				<label><input type="text" name="zip" value="" class="p-postal-code" placeholder="例）1500022"></label>
			</dd>
		</dl>
		<dl>
			<dt class="any">都道府県</dt>
			<dd>
				<span class="example01">例）東京都</span>
				<label><input type="text" name="state" value="" class="p-region" placeholder="例）東京都"></label>
			</dd>
		</dl>
		<dl>
			<dt class="any">住所</dt>
			<dd>
				<span class="example01">例）渋谷区恵比寿南1-15-1 A-PLACE恵比寿南5F</span>
				<label><input type="text" name="address" value="" class="p-locality p-street-address p-extended-address" placeholder="例）渋谷区恵比寿南1-15-1 A-PLACE恵比寿南5F"></label>
			</dd>
		</dl>
		<dl>
			<dt class="any">お問い合わせ内容</dt>
			<dd>
				<span class="example01">例）ご意見、ご質問などをご入力ください。</span>
				<label><textarea name="" id="" cols="30" rows="10" placeholder="例）ご意見、ご質問などをご入力ください。"></textarea></label>
			</dd>
		</dl>
		<div class="application01">
			<p>もう一度「メールアドレス」が正しいかご確認の上、<br>「この内容で送信する」ボタンを押してください。<span>（確認画面は表示されません）</span></p>
			<div class="btn_submit01">
				<button type="submit" name="submit"><p>この内容で送信する</p></button>
			<!-- /.btn_basic01 --></div>
		<!-- /.application --></div>
	<!-- /.table_basic01 --></div>
</form>

/* ==========================================================
!Reset
========================================================== */
/* 全ての要素のbox-sizingをデフォルトでborder-boxにする */
:root {
	box-sizing: border-box;
}
*,
::before,
::after {
	box-sizing: inherit;
}
/* ==========================================================
!Base
========================================================== */
h1 {
	text-align: center;
}
.table_basic01 {
	width: 100%;
	max-width: 760px;
	margin: 0 auto 4%;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #dddddd;

	dl {
		display: block;
		margin: 0;
		padding: 4% 0 4% 0;
		border-width: 0 0 1px 0;
		border-style: solid;
		border-color: #dddddd;

		dt {
			position: relative;
			width: 100%;
			margin: 0 0 2.5% 0;
			padding: 0;
			color: #00508e;
			font-size: 18px;
			font-weight: bold;
			text-align: left;
			line-height: 1.5;

			&:after {
				position: absolute;
				top: 4px;
				right: 0;
				display: inline-block;
				width: 35px;
				margin: 0 0 0 8px;
				padding: 4px 4px 3px 4px;
				color: #ffffff;
				font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
				font-size: 12px;
				line-height: 1;
				text-align: center;
				vertical-align: middle;
				content: "必須";
				background: #cc0000;
				transform: translate(0, -2px);
			}
			// 任意
			&.any {
				&:after {
					content: none;
				}
			}
		}
		dd {
			width: 100%;
			margin: 0;
			padding: 0;
			text-align: left;
			line-height: 1.5;

			&.form_parts01 {
				display: block;

				div {
					width: 100%;

					label {
						display: block;
						width: 100%;
					}
				}
			}
			.txt_advice01 {
				display: block;
				margin: 0 0 6px 0;
			}
			.example01 {
				display: block;
				font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
				font-size: 16px;
			}
		}
	}
	/* !送信ボタン
	---------------------------------------------------------- */
	.application01 {
		margin: 4% 0 0 0;
		padding: 4% 4% 4% 4%;
		background: #f7f7f7 none;

		p {
			text-align: center;

			span {
				display: block;
				margin: 4% 0 0 0;
			}
		}
	}
	.btn_submit01 {
		position: relative;
		width: 80%;
		max-width: 240px;
		margin: 2% auto;

		button,
		input[type="submit"] {
			position: relative;
			z-index: 1;
			display: block;
			width: 100%;
			margin: 0;
			padding: 1em 2em 1em 2em;
			border-width: 2px 2px 2px 2px;
			border-style: solid;
			border-color: #00508e;
			color: #ffffff;
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0.1em;
			background: #00508e;
			cursor: pointer;
			transition: color, background-color 0.1s;

			p {
				margin: 0;
				padding: 0;
			}

			&:hover,
			&:focus,
			&:active {
				border-width: 2px 2px 2px 2px;
				border-style: solid;
				border-color: #00508e;
				color: #00508e;
				background: #ffffff;
			}
		}
	}
}

/* 768px以上（タブレット） */
@media only screen and (min-width: 768px), print {
	.table_basic01 {
		dl {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			align-items: flex-start;
			position: relative;
			padding: 16px 0 16px 0;

			dt {
				position: relative;
				width: 30%;
				margin: 0;
				padding: 0;
			}
			dd {
				width: 65%;
				padding: 0 0 0 2%;
			}
		}
		/* !送信ボタン
		---------------------------------------------------------- */
		.application01 {
			margin: 16px 0 0 0;
			padding: 16px 16px 16px 16px;
		}
	}
}

/* ==========================================================
!Form Parts
========================================================== */
/* !reset
---------------------------------------------------------- */
input,
button,
textarea,
select {
	border: none;
	border-radius: 0;
	font-family: inherit;
	font-size: 100%;
	background: none;
	outline: none;

	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
select::-ms-expand {
	display: none;
}
::-ms-clear {
	display: none;
}

/* !iOS Reset
---------------------------------------------------------- */
input[type="submit"],
input[type="button"] {
	border: none;
	border-radius: 0;
	appearance: button;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: 2px;
}

/* !default
---------------------------------------------------------- */
legend {
	display: block;
	width: 100%;
	margin: 0 0 4% 0;
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	text-align: center;
}
fieldset {
	> p {
		margin: 0 0 4% 0;
		font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	}
}
label {
	position: relative;
	display: block;
	width: 100%;
	padding: 8px 0 8px 2.5em;
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	font-size: 18px;
	vertical-align: middle;
	cursor: pointer;
}
label > span {
	display: block;
	margin: -4px 0 8px 0;
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
textarea {
	width: calc(100% + 2.5em);
	margin: 0 0 0 -2.5em;
	padding: 10px 5px 12px 5px;
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-color: #767676;
	border-radius: 2px;
}
input[type="file"] {
}
.select_box {
	overflow: hidden;
	position: relative;
	width: 100%;

	&:after {
		position: absolute;
		top: 50%;
		right: 0.9em;
		width: 0;
		height: 0;
		padding: 0;
		border-width: 8px 8px 0 8px;
		border-style: solid;
		border-color: #dddddd transparent transparent transparent;
		content: "";
		transform: translateY(-50%);

		pointer-events: none;
	}
	select {
		position: relative;
		width: 100%;
		padding: 20px 1em 20px 20px;
		border-width: 2px 2px 2px 2px;
		border-style: solid;
		border-color: #dddddd;
		border-radius: 8px;

		&:-ms-expand {
			display: none;
		}
	}
}
button:hover {
	cursor: pointer;
}
/* numberの増減ボタンを消す */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	margin: 0;

	-webkit-appearance: none;
}
input[type="number"] {
	-moz-appearance: textfield;
}

/* 必須 */
input:required,
textarea:required {
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-color: #767676;
	background: #fffabb;
}

/* 必須 且つ 入力されていない */
input:required:invalid,
textarea:required:invalid {
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-color: #ed5959;
	background: #ed5959;
}

/* focus */
input:focus,
textarea:focus {
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-color: #767676;
	background: #fffabb;
}

/* 必須にfocus */
input:required:invalid:focus,
textarea:required:invalid:focus {
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-color: #000000;
	background: #fffabb;
}

/* Placeholder Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
	color: #767676;
	font-style: italic;
}
/* Placeholder Firefox 18- */
:-moz-placeholder {
	opacity: 1;
	color: #767676;
	font-style: italic;
}
/* Placeholder Firefox 19+ */
::-moz-placeholder {
	opacity: 1;
	color: #767676;
	font-style: italic;
}
/* Placeholder IE 10+ */
:-ms-input-placeholder {
	color: #767676;
	font-style: italic;
}

/* !ラジオボタン、チェックボックス
---------------------------------------------------------- */
input[type="radio"],
input[type="checkbox"] {
	position: absolute;
	top: 50%;
	left: 0;
	border: 2px solid #767676;
	width: 2em;
	height: 2em;
	line-height: 1;
	transform: translate(0, -50%);
	background: #ffffff none;
}
input[type="radio"] {
	border-radius: 50%;
}

/* !ラジオボタン、チェックボックスのクリック範囲にフォーカスしたとき
---------------------------------------------------------- */
label > input[type="radio"]:focus,
label > input[type="checkbox"]:focus {
	outline: dotted 2px #ed5959;
}

/* !ラジオボタン チェック印の背景
---------------------------------------------------------- */
label > input[type="radio"]:checked {
	border-color: #00508e;
}

/* !ラジオボタン チェックの印
---------------------------------------------------------- */
label > input[type="radio"]:checked:before {
	position: absolute;
	top: 7px;
	left: 7px;
	display: block;
	width: 1em;
	height: 1em;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #00508e;
	border-radius: 50%;
	background: #00508e none;
	content: "";
}

/* !チェックボタン チェック印の背景
---------------------------------------------------------- */
label > input[type="checkbox"]:checked {
	border-color: #00508e;
	background: #00508e none;
}

/* !チェックボタン チェックの印
---------------------------------------------------------- */
label > input[type="checkbox"]:checked:before {
	position: absolute;
	top: 0px;
	left: 10px;
	width: 14px;
	height: 26px;
	border-right: 4px solid #ffffff;
	border-bottom: 4px solid #ffffff;
	content: "";
	transform: rotate(45deg);
}

View Compiled

This Pen is owned by di_cr on CodePen.

See more by @di_cr on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript