Bootstrap(ver.3)でのトグルボタンは下記のようにカンタンに表現できます。
※iframeのsrcdoc属性を使用しているので見えないヒトもいるかもしれません＞＜
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<fieldset> <legend>ご注文メニュー</legend> <div data-toggle='buttons' id='menu'> <label class='btn btn-default'> <input type='checkbox' name='beer' value='1' />ビール </label> <label class='btn btn-default'> <input type='checkbox' name='ramen' value='1' />ラーメン </label> <label class='btn btn-default'> <input type='checkbox' name='gyoza' value='1' />ギョーザ </label> <label class='btn btn-default '> <input type='checkbox' name='chahan' value='1' />チャーハン </label> </div> </fieldset> |
しかしながら、iPhoneでの利用の際、タップすると「:hover」にあたるcssが発動してしまい、トグルの状態がなんか変になります。※しつこくiOS5を使っているからなのでしょうか？
※ラーメンとギョーザを選んだ後、ギョーザを解除した瞬間の衝撃画像
仕方が無いのでその項目だけ、:hover時に背景色を透過にするスタイルを適用する必要がありそうです。
|
1 2 3 4 5 6 |
<style> #menu label.btn:hover:not(.active) { background-color: transparent; } </style> |