♥單純是種快樂♥

利用 CSS 即可製作 radio 的動態效果。

最下方點選 Result 即可看效果。




HTML：


CSS：
　 .radio-toolbar input[type="radio"] {
　display:none;
}

.radio-toolbar label {
　display:inline-block;
　background-image:url(https://dl.dropboxusercontent.com/u/10520328/pixnet/article/2013/radio.png);
　background-repeat: no-repeat;
　padding:4px 11px;
　font-family:Arial;
　font-size:16px;
　background-position: center;
}

.radio-toolbar label:hover {
　background-image:url(https://dl.dropboxusercontent.com/u/10520328/pixnet/article/2013/radio2.png);
　/*background-position: bottom;
　background-position:-10px -14px; */
　/*可以只使用一張圖包含各種狀態的圖示，再利用調整圖片位置的方法改變顯示的區塊*/
}

.radio-toolbar input[type="radio"]:checked + label {
　background-image:url(https://dl.dropboxusercontent.com/u/10520328/pixnet/article/2013/radio2.png);
　/*background-position: bottom;*/
}


點選 CSS 及 HTML 即可看原始碼，點選 result 看成果：