BETA

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;
}
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@oceant'の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!