ラジオボタンでグラフィカルなトグルボタンを作ってみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTMLでトグルボタンを実装するにはinput[type=radio]が近道ですが、 リッチな雰囲気にする為に見た目を制御したい。今回はそんなお話です。 「ラジオボタンがすでにグラフィカルでは？」という細かいつっこみは置いといて頂き、 本稿ではより自由度高く外見をカスタマイズする方法を記していきます。 ラジオボタンでなくともトグルボタンはJavaScriptで作れますが、 択一で選択する仕組みをわざわざ自前で実装するよりも、 その為に作られた物をその為に使って実現してみます。 マークアップ 例えばこんなHTMLとCSSを書きます。 血液型を選択する簡単なトグルボタンです。 HTML <form class="question"> <h1>あなたの血液型は？</h1> <ul class="bloodtype-list"> <li
[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 Some :active & :focus effects 使い方は簡単、CSSファイルを外部ファイルとして記述し、input要素にclassを加えるだけです。CSSファイルは上記ページの下部「Download」からダウンロードできます。 エフェクトのカラーを変更したい場合は、CSSファイルで一括置換するだけでOKです。 HTML <head> ... <link rel="stylesheet" type="text/css" href="active_and_focus.min.css" media="a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
