クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > CSS > 【CSS】form用のリセット設定（ノーマライズCSS、リセットCSSとの比較）

【CSS】form用のリセット設定（ノーマライズCSS、リセットCSSとの比較）

CSS HTML

フォームのCSSって結構手間がかかったり、効いてくれなかったりで苦心しますね。TwitterでTAK（@tak_dcxi）さんがフォーム用のリセットCSSをツイートしていたので、実際に試してみました。それでは行きましょう！

【目次】

フォーム用のリセット設定

TAKさんのツイートはこちら。スレッドになっているので是非ご覧いただきたい！

実際にどうなるか試してみたらこうなった。

See the Pen form reset style by イイダリョウ (@i_ryo) on CodePen.

真っ白な世界！これと他のリセット系のCSSと比較してみる。

デフォルトCSS

はじめにブラウザデフォルトCSSと比較する。

See the Pen form reset style-1 by イイダリョウ (@i_ryo) on CodePen.

HTMLコード

<form action="cgi-bin/formmail.cgi" method="post">
<p>
名前：<input type="text" name="name" size="40">
</p>
<p>
性別：<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</p>
<p>
血液型：<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</p>
<p>
ご感想：<br>
<textarea name="kanso" rows="4" cols="40"></textarea>
</p>
<p>
<input type="submit" value="送信"><input type="reset" value="リセット">
</p>
</form>

こちらのページに代表的なフォーム系のタグの事例があったので使わせていただいた。

※参考：http://www.htmq.com/html/form.shtml

各ブラウザにはデフォルトのCSSスタイルが設定されている。設定はブラウザごとに差異があるため、それぞれ違う見た目になると思う。

それをリセットするCSSスタイルがいくつかあり、広く知られている。（サニタイズCSSって初耳だった）

※参考：【Web初心者向け】リセットCSS、ノーマライズCSS、サニタイズCSSの違い │ ジャングルオーシャン

ノーマライズCSS

ノーマライズCSSはブラウザのデフォルトスタイルをある程度残しながら、ブラウザごとの差異をなくして平準化したようなスタイル。

※参考：Normalize.css: Make browsers render all elements more consistently.

See the Pen form reset style-2 by イイダリョウ (@i_ryo) on CodePen.

こちらの場合はどのブラウザで見てもだいたい同じ見た目になると思う。

リセットCSS

リセットCSSはできる限りスタイル設定をなくそうというスタイル。ゼロからスタイルをつけていきたい人向き。

※参考：Eric Meyer’s “Reset CSS” 2.0 | CSS Reset

See the Pen form reset style-3 by イイダリョウ (@i_ryo) on CodePen.

こちらはスタイル自体がほとんどなくなっているのがわかると思う。それでもinputタグの枠線など最低限のフォームの形状は残っている。

form用のリセット設定

さて、冒頭で触れたform用のリセット設定。

See the Pen form reset style by イイダリョウ (@i_ryo) on CodePen.

こちらはformの形状が全て消えて、真っ白になっている。

CSSコード

input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type='checkbox'],
input[type='radio'] {
  display: none;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

冒頭のappearance: none;がポイント。これがなかなか消えないフォーム設定の犯人。さらにベンプレも追加している。

また、チェックボックス、ラジオボタンなどを非表示にしたり、hover時のカーソルを矢印にしたりと割と毎回行うような設定も書かれている。

リセット後にCSSスタイルを当てる

form用のリセットCSSにスタイルを加えてみた。

See the Pen form reset style-5 by イイダリョウ (@i_ryo) on CodePen.

いつもdivタグなどに書いているCSSと同じ感覚で見た目を変えることができた！

特殊なの書き方はラジオボタンのところくらいか。

HTMLコード

<p class="radio">
性別：<input type="radio" name="sex" value="male" id="male"><label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"><label for="female">女</label>
</p>

項目名をlabelタグで囲んで、ラジオボタンのid属性とlabelのfor属性で紐づける。

CSSコード

.radio label {
  position: relative;
  padding-left: 1.25em;
  margin-right: 1em;
}

.radio label::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #eee;
}

.radio input:checked + label::after {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  background: #A66970;
  border-radius: 50%;
}
  • labelにラジオボタン用のスタイルを当てる
  • labelの擬似要素beforeでラジオボタンのスタイルを設定する。（ラベルと同じく擬似クラスも選択範囲になる）
  • 擬似クラスcheckedで選択されたラジオボタンにだけ擬似要素afterの選択マーク設定を適用する

こんな感じで普段スタイルを変えにくいラジオボタン、チェックボックスなどのスタイルを変更する

※参考：CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた │ カルチャーアカデミア広島

最後に

f:id:idr_zz:20190824224935j:plain

自分は割とまっさらな状態からスタイルをつけていく方が好きで、ノーマライズCSSよりリセットCSSを使うことが多かった。それでもフォームのスタイルは変えにくいなぁと感じることはあったので、こうしたフォーム用のリセットスタイルは使い道はありそうだなーと感じました。管理画面系などあまり凝ったことをしない場合はノーマライズCSSも有効なのでケースバイケースで活用していきましょう。それではまた！

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com