ついつい押したくなる、CSS3を使ったラジオボタンのデザイン

フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル１からコードを紹介していきます。 サンプル１ 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題

[noriroh]

“.sample input{02 display: none;03}04.sample label{05 display: block;06 float: left;07 cursor: pointer;08 width: 80px;09 margin: 0;10 padding: 12px 5px;11 border-right: 1px solid #abb2b7;12 background: #bdc3c7;13 color: #555e64;14 font-size: 14px;15 text-align: center;16 line-height: 1;17 transiti

[h-a-t-e-h-a-t-e-h-a-t-e-n-a]

ラジオボタン cssで装飾

[sase]

よいね

[k_ume75]

ラジオボタン

[moruzo15]

フォーム

[primedesignworks]

ぼくこういうのばっかり作ってる