【CSS3】チェックボックス・ラジオボタンに色を付けてみる。

CSS3のセレクタを利用することによって、デフォルトのチェックボックス・ラジオボタンではなく、色付きのカスタマイズデザインに変更することができます。

通常、チェックボックス・ラジオボタンといえば、

もちろんこのようなものでも悪くないのですが・・・

こんな感じのものはどうですか


・・・つまり、このような形にしたり、チェックに色を付けたり、そのチェックの枠の色を変えたりすることができます(グレーながらも僅かに青がかるようにしています。)

Internet Explorer 9以上など、ある程度新しいブラウザーで使うことができます。(IE8未満は非対応なので、メディアクエリーとセレクタで抑制しています)

やり方

CSS

HTML

このテクニックの注意ポイント

<label for="●●"> の使い方!

labelタグを使う人は、labelタグの中にinputタグを包み込んで、文字をクリック(スマホだったらタップ)しても反応するようにする…という使い方をしていると思います。

しかし、今回のは

  • input に固有のIDを付けて、label for〜 でリンク付ける
  • 元々の input 要素は非表示にし、
  • 代わりに CSS3 でまったく別の形で描画する

という方法を採っています。

秋田マーケットサービス有限会社はWEBデザイン、プログラマーを募集中です。

秋田マーケットサービス有限会社採用情報

弊社では、様々なWebアプリケーションを開発しています

宿泊施設・予約システム(ホームページひな形付き)

minshuku_admin_top

弊社では宿泊施設・予約システムをはじめ、様々なWebアプリケーションを開発しています。

サーバーサイドの機能が満載なのはもちろんのことですが、HTML5・CSS(今回ご紹介したような内容も含みます)・jQueryなどといったフロントエンド部分も、パソコンに不慣れな方でも直感的に操作できるようにしています。

minshuku_multidevice

また、予約システムだけではなくホームページテンプレートも付属しています。このホームページ1つでだけで宿泊予約が出来ますし(外注システム不要)、システムでプラン情報や価格などを設定すると、即座にホームページにも反映されるようになっています。

また、タブレットやスマートフォンなどといったマルチデバイスにも対応しております。


このシステムの詳細情報はこちらのバナーからご覧ください。
slideshow-shukuhaku

WordPress のバーを少し透かしてみた

少し前の話になりますが、Wordpress の管理画面のバーを少し色透明にしてみました。

Wordpress Bar - Transparent

少し前のお話しになりますが・・・

WordPress 3.9 以降ですと、Wordpress のバーはフラットデザインの黒いバーになります。

今回お客様の WordPress のテーマを作るにあたり、ちょっとした遊び心でバーの色をちょっと透明にしてみました。

CSS

解説

  • Q. なぜ 783px 以上のメディアクエリーがあるのか?
    タブレット以下になると、Wordpress のバーは上部固定ではなくなってしまいます。そうなると半透明である理由がなくなってしまうので、783px 以上限定にしています。
    ただ position: fixed; を掛ければまたいい話なんですけどね・・・
  • あの長い 7 〜 13 行目のCSSは?
    上部バーから展開するプルダウンにも適用させるための CSS です。上部バーよりも若干明るく・薄くしています。