CSS でチェックボックスとラジオボタンを装飾する方法 | SONICMOOV LABまりぞーです(∩°ω°∩) 鳥さんのおしりに夢中です。 CSSのみでチェックボックスやラジオボタンを装飾したい衝動に駆られたのでご紹介します。 Chrome、Firefox、IE9+ で確認済みです。 基本的には、チェックボックス或いはラジオボタンの実体であるinput要素とspan要素を並べてlabel要素で囲み、checkedの状態かそうでないかでCSSを切り替えます。 実際の見た目に反映するのはlabel要素の中のspan要素や疑似要素になります。 デモはこちら [sourcecode lang="css"] /* 汎用てきなもの ================================================== */ input[type="checkbox"], input[type="radio"] { margin:
