かつて、私はサイトのフォーム上でいくつかの色のいずれかを選択するタスクがありました。 簡単なことは何もないように思われます。
radiobutton要素は、可能な限り、このタスクに適しています。少しカスタマイズするだけです。 これが問題の始まりです。 事実、
radiobuttonと
checkbutton radiobutton checkbuttonのレンダリングはブラウザではなくOSによって制御されます。 したがって、ほとんどのCSSプロパティ（たとえば、
background-color ）はそれらに影響しません。
インターネット上で、私は
radiobuttonをカスタマイズする多くの方法を見つけましたが、それらはすべて私には複雑すぎるように思えたので、私自身の方法を考え出すことにしました。
私の考えは、ユーザーが
labelクリックすると、
radiobutton切り替わるという事実に基づいています。 したがって、
radiobuttonではなく
labelカスタマイズできます。
HTMLコードの例を考えてみましょう。
<input type="radio" name="color" value="#0000ff" id="blue"/> <label for="blue" class="blue"></label> <input type="radio" name="color" value="#00ffff" id="cyan"/> <label for="cyan" class="cyan"></label>
ここでは珍しいことは何もありません。 通常の
radiobuttonとそれらへの署名。
今CSS：
// radiobutton input[type="radio"]{display: none;} // label label{ width: 20px; height: 20px; } label.blue{background-color: blue;} label.cyan{background-color: #00ffff;} // input[type="radio"]:checked+label{ border: black solid 2px; }
ここで、
radiobuttonを非表示にし、
label方法を描画します。 マークされた状態
input[type="radio"]:checked+label labelを描画し
input[type="radio"]:checked+label すべてがシンプルでエレガントです。
1つの「しかし」ではない場合、これは投稿を終了する可能性があります。
リンゴに向かって腐ったトマトのペア
特別な開発パスを持つ企業が1つもなければ、世界は美しく、美しいものになるでしょう。 これはAppleであり、そのユーザーが
labelを突く権利を否定しています。 その結果、私の方法はiPhoneとiPadで機能しません。 最も興味深いのは、Windows上のSafariがすべてを正しく噛むことです。 残念ながら、チェックするために手元にあるiMacはありませんでした。
特に流行に敏感な人には、JSを使用する必要がありました（コードはjQueryと組み合わせて使用するように設計されています）。
var deviceAgent = navigator.userAgent.toLowerCase(); var iOS = deviceAgent.match(/(iphone|ipod|ipad)/); if (iOS) { $('label').click(function (event) { $('#' + $(event.target).attr('for')).attr('checked', true).change(); }); }
使用例
Long Twitは、テキストを画像にレンダリングしてTwitterに送信するシンプルなサービスです。 テキストと背景の色を選択できます。