Recommendおすすめ記事
2020/06/10

【css】inputの初期スタイルをリセットする

kazuki

kazuki

2020/06/10
【css】inputの初期スタイルをリセットする
SHARE

こんにちは、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”]がついただけですね(笑)

他の記事を探す
SHARE
Relation関連記事