Roroa.

こんにちは、kazukiです。
今回は毎度忘れては検索しているinputタグのリセットcssをメモとして残しておきたいと思います。

inputタグは初期で適用されているスタイルがあるのでデザインを変えたい場合は、一度リセットをかけてあげるとやり易いです。
なので共通のcssにあらかじめリセットさせておくと便利かと思います。

なお、チェックボックス（type=”checkbox”）・やラジオボタン（type=”radio”）は初期で適用されているスタイルをそのまま使うこともあるので、テキスト（type=”text”）だけに設定するなど用途に応じて使い分けた方がいいかもしれません。

inputのリセットcss

リセットさせるcssは以下です。

input {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

inputのtype=”text”にだけ適用させる

次にtype=”text”にだけリセットさせるcssです。

input[type="text"] {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

inputに[type=”text”]がついただけですね（笑）