ブックマーク / weboook.blog22.fc2.com (1)

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

    フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。 ではサンプル1からコードを紹介していきます。 サンプル1 二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 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> 特に問題

    ついつい押したくなる、CSS3を使ったラジオボタンのデザイン
    noriroh
    noriroh 2018/02/12
    “.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
  • 1