チェックボックスのHTML入力スタイルをデフォルト（IE標準）にリセットする方法

チェックボックスをネイティブスタイルに戻せない理由

一部のWebブラウザでは、一度CSSでカスタマイズしたチェックボックスの見た目を、デフォルトのネイティブスタイルへ完全に戻す（リセットする）ことができません。これは、ブラウザごとにフォーム部品の内部実装が異なるために生じる制限です。

解決策：スタイルを適用するinputタイプを個別に指定する

チェックボックスに不要なスタイルが適用されるのを防ぐには、スタイルを当てたいinputタイプをすべて明示的に列挙するのが確実な方法です。例えば、テキストボックスとパスワード入力欄だけに枠線を付けたい場合は、次のように記述します。

input[type="text"], input[type="password"] {
    border: 2px solid green;
}

このように対象となるタイプを一つずつ指定することで、チェックボックスやラジオボタンなど、他の要素への影響を回避できます。

CSS3の疑似クラスを使う方法

より簡潔に書きたい場合は、CSS3の:not()疑似クラスを利用して「チェックボックス以外」にまとめてスタイルを適用する方法もあります。

input:not([type="checkbox"]) {
    border: 2px solid green;
}

ただし、この記述はInternet Explorer 11では正しく動作しない場合がある点に注意してください。

使い分けのポイント

古いブラウザ（特にIE）への対応が必要なプロジェクトでは、inputタイプを個別に列挙する方法を選ぶのが安全です。一方、モダンブラウザのみを対象とできる場合は、:not()疑似クラスを使った記述の方が保守性に優れています。