フォーム要素のスタイルをリセットする

フォーム要素のスタイルをリセットしたい場面がよくあるので、それぞれのスタイルのリセットを試してみます。

サンプルコード

特に設定しない場合、以下のような表示になります。

HTML

<form action="" class="form">
	<div class="form_item">
		<div class="form_key">お名前</div>
		<div class="form_value">
			<input type="text" />
		</div>
	</div>
	<div class="form_item">
		<div class="form_key">性別</div>
		<div class="form_value">
			<input type="radio" name="gender" id="male" />
			<label for="male">男性</label>
			<input type="radio" name="gender" id="female" />
			<label for="female">女性</label>
		</div>
	</div>
	<div class="form_item">
		<div class="form_key">好み</div>
		<div class="form_value">
			<input type="checkbox" name="favorite" id="overlord" />
			<label for="overlord">オーバーロードⅡ</label>
			<input type="checkbox" name="favorite" id="takagi-san" />
			<label for="takagi-san">からかい上手の高木さん</label>
			<input type="checkbox" name="favorite" id="slow-start" />
			<label for="slow-start">スロウスタート</label>
			<input type="checkbox" name="favorite" id="yorimoi" />
			<label for="yorimoi">宇宙よりも遠い場所</label>
			<input type="checkbox" name="favorite" id="laid-back-camp" />
			<label for="laid-back-camp">ゆるキャン△</label>
		</div>
	</div>
	<div class="form_item">
		<div class="form_key">地域</div>
		<div class="form_value">
			<select>
				<option>----------</option>
				<option>北海道</option>
				<option>東北</option>
				<option>関東</option>
				<option>中部</option>
				<option>近畿</option>
				<option>中国</option>
				<option>四国</option>
				<option>九州</option>
			</select>
		</div>
	</div>
	<div class="form_item">
		<div class="form_key">メッセージ</div>
		<div class="form_value">
			<textarea></textarea>
		</div>
	</div>
	<button>ボタン</button>
	<input type="submit" value="送信" />
</form>

設定しない場合のデモページ
　

input type=”text”

1行テキスト(input type=”text”)のスタイルをリセットしてみます。
HTMLは前と同じです。

CSS

input[type="text"] {
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
}

input type=”text”のスタイルをリセットするデモページ
type=”tel”やtype=”email”など、他の1行テキストもリセットしたい場合は適宜追加してください。
　

ラジオボタン

ラジオボタンのスタイルをリセットしてみます。

CSS

input[type="radio"] {
	display: none;
}
input[type="radio"]:checked + label {
	background: #ff0000;
}

デフォルトのラジオボタンはdisplay: none;で非表示にして、labelに背景画像を指定してデザインを変更する想定です。
もしくは::beforeなどの疑似要素でデザインを変更してもよいです。
選択時の変更は隣接セレクタを使って対応しています。
ラジオボタンのスタイルをリセットするデモページ
　

チェックボックス

チェックボックスのスタイルをリセットしてみます。
やり方はラジオボタンと同じです。

CSS

input[type="checkbox"] {
	display: none;
}
input[type="checkbox"]:checked + label {
	background: #ff0000;
}

チェックボックスのスタイルをリセットするデモページ
　

セレクトボックス

セレクトボックスのスタイルをリセットしてみます。

CSS

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	background: transparent;
}

セレクトボックスのスタイルをリセットするデモページ
IEでだけ右の矢印が残ってしまうので注意してください。

セレクトボックスのデザイン変更は以前記事を投稿していますので、そちらも参照ください。
selectのデザインを変更する
　

テキストエリア

テキストエリアのスタイルをリセットしてみます。

CSS

textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	resize: none;
	padding: 0;
	border: 0;
	background: transparent;
}

chromeなどで右下に表示されるリサイズ用のUIを非表示にするため、resize: none;を指定しています。
ユーザーにリサイズをさせたい場合は外してください。
テキストエリアのスタイルをリセットするデモページ
セレクトボックスと同じく、テキストエリアもIEだけ少し表示が異なるのでご注意ください。

ボタン

buttonタグとinput type=”submit”のスタイルをリセットしてみます。

CSS

button,
input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	border: none;
	background: transparent;
}

ボタンのスタイルをリセットするデモページ
　

【参考サイト】

• フォーム周りで覚えておくと便利なCSS Snippets | NxWorld
• 
  
  のCSSについておさらい（スタイルを乗せる下準備） – Qiita
• button要素のcssをリセットしたい – Qiita