JSを使用しないラジオボタンのカスタマイズ

かつて、私はサイトのフォーム上でいくつかの色のいずれかを選択するタスクがありました。 簡単なことは何もないように思われます。 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に送信するシンプルなサービスです。 テキストと背景の色を選択できます。