skillup

技術ブログ

デザイン

checkboxのカスタマイズ

投稿日:2017年10月15日 更新日:

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。

やったことなかったんですが、やってみると結構面白い。

ソース

まずはソースを。
html

css

 

前提条件として知っておきたいのはbefore,afterの疑似要素の使い方(通常のhtmlパーツを消し,before,afterで生成する)。また上の例ではないですがinput + labelなどと隣接要素を使うときもあるので要注意。※リンク参照

実際のポイントはソースの中に書いてありますが、下記の通り

  1. まずは通常のcheckboxをクリア
  2. 通常の要素(labelなど)にposition:relative
  3. ボックスとチェックマークをafterとbeforeにしposition absoluteで作成
  4. チェックマークは通常のboxのborderでつくり、傾かせる。ただし通常時は目に見えないのでopacity:0
  5. checked状態になったときにopacity:1にする

これはcssだけでやってますが、他にも画像を使ったり、font awesomeを使うなど。※リンク参照

参考リンク

CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた

CSSの疑似要素とは?beforeとafterの使い方まとめ

いざチェックボックスをcssのみでカスタマイズ

CSSでラジオボタンとチェックボックスをデザインする

raioとcheckboxのカスタマイズ

フォームのチェックボックスやラジオボタンをオリジナルデザインにカスタマイズする時のCSS

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

頻出CSSのまとめ

普段PHPでシステムを作るときはほぼフレームワークを使い、よく出る頻出処理に関してはユーティリティ系のクラスにまとめてます。(特に日付、配列やコレクション、文字列がらみの操作) で、CSSでもよく出る …

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

アーカイブ