checkboxをCSSでスタイリング

公開日:2018-10-17
最終更新:2018-10-24
※この記事は外部サイト(https://note.mu/oceant/n/nf183509019fb)からのクロス投稿です

デフォルトのcheckboxはdisplay: none;で隠しつつ、::beforeで四角の枠を、::afterでチェックマークを付けていきます。

radioの場合はborder-radius: 50%; で円を作れば良さそうですね。

<label>
    <input type="checkbox" value="項目値" class="check-input">
    <span class="check-span">ちぇっくぼっくす</span>
</label>
.check-input {
  display: none;
}

.check-span{
  padding-left: 37px;
  position:relative;
}

.check-span::before{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 25px;
  height: 25px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f2f2f2
}

.check-input:checked + .check-span::after{
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 9px;
  width: 8px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #999;
  border-right: 3px solid #999;
}
記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@oceant'の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする