タグのデフォルトの見た目を消したくなりますよね。使えばデフォルトの見た目を消せますが、IE11が未対応なのでIE11をサポートする場合には使えません。装飾してしまいますよね。非表示にしてしまうとアクセシビリティが低下してしまうため避けた方が懸命です。tabキーでフォーカスができなくなってしまうため、キーボードユーザーがそのチェックボックスやラジオボタンを選択することができなくなってしまいます。キーボードユーザーというのは、スクリーンリーダーなどの支援ソフトを利用している視覚障害者や、マウスポインタなどの繊細な操作が困難な身体障害者や高齢者が考えられます。いう限りなく見えないようにする方法があります。スクリーンリーダーには読ませたいけども、視覚的には非表示にしたいというアクセシビリティ対応のテクニックです。検索するとサンプルコードが色々と出てきますが、解説も含めてわかりやすいものを以下に引用します。今現在なぜ-1pxがここで設定されるかは分かっていないそうです。使ってチェックボックスやラジオボタンを装飾すれば、キーボードユーザーにやさしいサイトになります。していたチェックボックスの例を書き換えてみます。class="checkbox-text">素敵なチェックボックス</span></label>こんな具合になります。スタイルを使い回せるようにすると良いかもしれません。チェックボックス・ラジオボタンの挙動の違いは、以下の動画から確認できます。