CSSチェックボックスの入力スタイル

のスタイルinputはすべての入力要素に影響します。各チェックボックス要素にクラスを適用せずに、チェックボックスのみに適用するスタイルを指定する方法はありますか？

CSS 2でこれを行うことができます：

input[type='checkbox'] { ... }

これは今ではかなり広くサポートされているはずです。ブラウザのサポートを見る

ラベルなしで独自のソリューションを作成します

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}

<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

ラジオボタンとチェックボックスのスタイリングで最近発見したもの。以前は、jQueryなどを使用する必要がありました。しかし、これは愚かなほど簡単です。

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

チェックボックスにも同じことができます。明らかにinput[type=radio]to input[type=checkbox]とに変更border-radius:15px;しborder-radius:4px;ます。

これがあなたにとっていくらか役立つことを願っています。

次のようなクラスもうまく機能します。

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

次のようにして、特定の属性にのみ適用できます。

input[type="checkbox"] {...}

ここで説明します。

input[type="checkbox"] {
 /* your style */
}

ただし、これはIE7以下を除くブラウザーでのみ機能します。クラスを使用する必要があるブラウザーのためにです。

トライデントは、::-ms-checkチェックボックスとラジオボタンコントロールの疑似要素を提供します。例えば：

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

これは、Windows 8のIE10では次のように表示されます。

IE6は属性セレクターを理解しないので、IE6（条件付きコメント付き）でのみ表示されるスクリプトと、Dean EdwardsによるjQueryまたはIE7.jsを組み合わせることができます。

IE7（.js）は、Microsoft Internet Explorerを標準準拠のブラウザのように動作させるJavaScriptライブラリです。多くのHTMLおよびCSSの問題が修正され、IE5およびIE6で透明PNGが正しく機能するようになります。

クラスまたはjQueryまたはIE7.jsの使用の選択は、あなたの高評価と低評価、およびその他のニーズに依存します（IE6での1ビットの透明度にフォールバックする完全な透明度を持つPNG-8に依存する必要がない、サイト全体でのPNG-24の透明度）。 -Fireworksとpngnqなどによってのみ作成されます）

CSSは、チェックボックスのタイプまたは別のタイプに固有のスタイルを実行する方法を提供しますが、これをサポートしないブラウザーでは問題が発生します。

この場合の唯一の選択肢は、チェックボックスにクラスを適用することです。

チェックボックスにclass = "checkbox"を追加するだけです。

次に、CSSコードでそのスタイルを作成します。

あなたができることの1つはこれです：

main.css

input[type="checkbox"] { /* css code here */ }

ie.css

.checkbox{ /* css code here for ie */ }

次に、IE固有のCSSインクルードを使用します。

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IEで機能するためには、クラスを追加する必要があります。また、IEをサポートしていない他の非IEブラウザーでは機能しません。しかし、それはあなたのウェブサイトをCSSコードで前向きにするでしょう、そしてIEがサポートを得るとき、あなたはチェックボックスからIE特定のCSSコードとCSSクラスを削除することができるでしょう。