Zenn
😄

checkboxのデザインを変更する場合よく使うcss【Bootstrapは使う?(vue)】

2021/12/30に公開
CSS
デザイン
tech

以前から気になっていたZennではじめて書いてみます。

checkboxのデザインを変更する場合よく使うcss

checkboxをデザインを変更する場合よく使うcssという簡単なお題を選んでみました。

checkboxのhtml

checkbox
<label class="checkbox-name">
  <input />
  <span class="checkbox-name-icon">★</span>
  文字
</label>

vue-fontawesomeを使う場合は次のような形になります。

checkbox
<label class="checkbox-name">
  <input />
  <span class="checkbox-name-icon">
    <fa :icon="['fas', 'check']" size="2x"/>
  </span>
  文字
</label>

次に背景をどうするかです。マークだけ色をつけるのか、文字を含めてボタンにするのかです。

checkbox
/*マークだけ*/
.checkbox-name span {
  background-color: #f6f4e9;
}
/*文字を含める*/
.checkbox-name {
  background-color: #f6f4e9;
}

基本のフレームさえできればあとは装飾なので簡単です。

デフォルトのチェックボックスを消す

消すのは後でもいいんですけど、デザインの基本の考え方はAndroid、iOS、PCなどで使われるデフォルトのチェックボックスは消すこと。

checkbox
.checkbox-name input[type='checkbox-name'] {
  opacity: 0;
  position: absolute;
}

absoluteは消すんですけど、変なところに当たり判定ができないように位置調整です。

あとは好きなようにチェックボックスをデザインするだけです。

checkbox
.checkbox-name-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #f6f4e9;
  border-radius: 10px;
}

チェック時のCSS

チェックボックスをチェックされたとき、全体の色を変えたいときに使います。

checkbox
.checkbox input:checked ~ .checkbox-name-icon {
  background-color: #323232;
}

CSSを~(チルダ)で繋ぐことができます。

同じ階層内にある、後方の要素にCSSを適用することができます。inputタグの後ろすべてのdivに適用します。前にあるdivには適用されません。

プラスとチルダの違い

チルダ以外にプラスもありますが、チルダとプラスの違いはチェックボックスが効く効かないの範囲が違います。

checkbox
input:checked + .icon

+は同一階層の直後の要素のみ。

checkbox
input:checked ~ .icon

~は同一階層のすべての要素。

親要素と同一階層の子要素

同一階層の子要素なら指定できるようです。同一階層を指定してそのまま子要素を書きます。

checkbox
.checkbox input:checked + .same .child-icon

上位要素(子から親)はCSS4の:hasがあるっぽいですけど、対応しているブラウザがないのでまだ使えないっぽいです。

input:disabled・無効時のCSS

inputが無効のとき、アイコンの色が変わるサンプルです。cursor: not-allowed;はカーソル無効なので検証する際に手がかりになります。

checkbox
.checkbox input:disabled + .checkbox-name-icon {
  color: #fff;
  cursor: not-allowed;
}

fontawesomeでチェックアイコンをアニメーション

表示と非表示ではなく、よりスムーズなScaleアニメーションで対応しました。

checkbox
.checkbox-name-icon svg {
  transition: 0.3s cubic-bezier(1, 0, 0, 1) 0.3s;
  transform: scale(0) rotateZ(180deg);
}

input[type='checkbox']:checked ~ .checkbox-name-icon svg {
  transform: scale(1) rotateZ(0deg);
}

vueの場合、このような書き方になりましたが、擬似要素で対応した場合は若干書き方が違う気もします。

チェックされたとき、class指定は親を指定できないため、.checkbox-name-iconで調整してあげるのがプチポイントです。

Bootstrapは使わない

個人的な意見はこうです。経験上、凝ったことをやりたい場合はBootstrapは外す流れになります。サンプルなども探すとBootstrap(vuetify, bootstrapvue)を使っていない場合がほとんどなので。

できないことはないんでしょうけど、余計な労力がかかる気がします。

zenn使いやすく気に入りましたが、スクラップ的な駄文は今のところブログに書いています。css,vue(nuxt),firebaseなどの記事があります。

ご参考になれば幸いです。

Discussion