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

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5d861dc101 …