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を組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素1.2.1 参考リンク2 レ …

no image

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …