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

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

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

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

no image

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

アーカイブ