案子製作時因為有問題找資料解決，無意間找看到這個 高雄國際航空站場地租借申請 (需要點同意按鈕)，其中多選框（checkbox）和單選框（radio）設計運用的地方。看上去是個按鈕，但實際上可以符合多選框（checkbox）和單選框（radio）的功能。
實作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <div class="c-radio"> <!-- 選取狀態 --> <input class="c-radio__input" type="radio" id="male" name="sex" checked> <label class="c-radio__label" for="male">男性</label> <!-- /選取狀態 --> <!-- 未選取狀態 --> <input class="c-radio__input" type="radio" id="female" name="sex"> <label class="c-radio__label" for="female">女性</label> <!-- /未選取狀態 --> <!-- 禁用狀態 --> <input class="c-radio__input" type="radio" id="other" name="sex" disabled> <label class="c-radio__label" for="other">其它</label> <!-- /禁用狀態 --> </div> <div class="c-checkboxBtn"> <!-- 未選取狀態 --> <input class="c-checkboxBtn__input" type="checkbox" id="ac01" value="活動類別一"> <label class="c-checkboxBtn__label" for="ac01">活動類別一</label> <!-- /未選取狀態 --> <!-- 選取狀態 --> <input class="c-checkboxBtn__input" type="checkbox" checked id="ac02" value="活動類別二活動類別二"> <label class="c-checkboxBtn__label" for="ac02">活動類別二活動類別二</label> <!-- /選取狀態 --> <!-- 禁用狀態 --> <input class="c-checkboxBtn__input" type="checkbox" disabled id="ac03" value="活動類別二活動類別二"> <label class="c-checkboxBtn__label" for="ac03">活動類別二活動類別二</label> <!-- /禁用狀態 --> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | body { padding: 20px; } .c-radio { display: flex; flex-wrap: wrap; &__label { padding: 10px; margin: 3px; } &__input[type="radio"] { display: none; + label { cursor: pointer; border: #333 1px solid; } &:checked + label { background-color: black; color: #fff; } &[disabled] + label { opacity: .65; background-color: gray; cursor: not-allowed; } } } .c-checkboxBtn { display: flex; flex-wrap: wrap; &__label { padding: 10px; margin: 3px; } &__input[type="checkbox"] { display: none; + label { cursor: pointer; border: #333 1px solid; } &:checked + label { background-color: black; color: #fff; } &[disabled] + label { opacity: .65; background-color: gray; cursor: not-allowed; } } } |
See the Pen 純 CSS 仿按鈕的 radio 與 checkbox by Jimmy_Wu (@Jimmy_Wu) on CodePen.
http://jsbin.com/viwoju/edit?html,css,output
無障礙站台使用
後來發現bootstrap的部份也有相關的組件可以用。bootstrap JavaScript 插件中的 Checkbox / Radio
點同意按鈕進入畫
像按鈕樣式的多選框（checkbox）黃色是多選框勾選、綠色是未選、紅色是禁用
停用樣式的html架構
