ラジオボタンでグラフィカルなトグルボタンを作ってみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTMLでトグルボタンを実装するにはinput[type=radio]が近道ですが、 リッチな雰囲気にする為に見た目を制御したい。今回はそんなお話です。 「ラジオボタンがすでにグラフィカルでは？」という細かいつっこみは置いといて頂き、 本稿ではより自由度高く外見をカスタマイズする方法を記していきます。 ラジオボタンでなくともトグルボタンはJavaScriptで作れますが、 択一で選択する仕組みをわざわざ自前で実装するよりも、 その為に作られた物をその為に使って実現してみます。 マークアップ 例えばこんなHTMLとCSSを書きます。 血液型を選択する簡単なトグルボタンです。 HTML <form class="question"> <h1>あなたの血液型は？</h1> <ul class="bloodtype-list"> <li
CSS（CSS3）のみでToggle（トグル）動作を実現させる方法｜BLACKFLAG
jQueryなどのJavaScriptではクリックする度に交互にアクションを実行させる時に 「toggle（トグル）」という処理をよく使用します。 この「toggle」処理をJavaScriptを使用せずに、CSS3のみで実装させる方法が紹介されていたのが 興味深かったのでメモ書き程度に紹介してみます。 CSS3 toggle-button without JavaScript ≫CSS3 toggle-button without JavaScript ≫ソース構成等はこちらから 画面上の水滴の様な画像をクリックすると画面全体が切り替わり、 再度同じところの画像をクリックすると元に戻ります。 このCSSのみでの「toggle」動作は、CSS3プロパティの「:target」と「pointer-events」を組み合わせて実現しています。 基本部分は3行程度で実装可能となっているシンプルさも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
