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

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

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

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

CSS [crayon-633cb3a264 …

no image

backgroundやbox系のプロパティ

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで Contents1 背景画像の位置 background-postion2 背景画像のサイ …

no image

頻出CSSのまとめ

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

no image

PDFテンプレートの活用

PDFのテンプレートの活用について。 PDFを出力するプログラムはいろいろありますが、今回はすでにあるPDFをテンプレート化できるライブラリについて。 Contents1 FPDI2 ソース3 参考リ …

アーカイブ