35

CSSでチェックボックスのデフォルトの「ボックス画像」を変更しようとしていますが、うまくいきません。これを回避する方法はありますか？

.class_checkbox{
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}

<input type="checkbox" class="class_checkbox">
4

5 に答える 5

94

次のようにチェックボックスにラベルを追加するだけで、純粋な css を使用できます。

.check_box {
    display:none;
}

.check_box + label{
    background:url('images/check-box.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

.check_box:checked + label{
    background:url('images/check-box-checked.png') no-repeat;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

HTML の例:

    .check_box {
    	display:none;
    }

    .check_box + label{
    	background:url('images/check-box.png') no-repeat;
    	height: 16px;
    	width: 16px;
    	display:inline-block;
        padding: 0 0 0 0px;
    }

    .check_box:checked + label{
        background:url('images/check-box-checked.png') no-repeat;
    	height: 16px;
    	width: 16px;
    	display:inline-block;
        padding: 0 0 0 0px;
    }
<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">

于 2012-12-19T13:04:11.463 に答える
13

試す：

<input type="checkbox" class="input_class_checkbox">

jQuery

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

フィドル: http://jsfiddle.net/cn6kn/

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
.class_checkbox {
    width: 20px;  
    height: 20px;
    background-color: red;
}
.class_checkbox.checked {
    background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">

于 2012-04-22T18:58:16.473 に答える
9

純粋な CSS を使用して Fiddle を作成しました。チェックボックスの値が変わらないため、最も投票された回答はクリックイベントを処理せず、うまく機能しません。

これは私の例です：

http://jsfiddle.net/kEHGN/1/

基本的に、次の html が必要です。

<div class="checkbox_wrapper">
    <input type="checkbox" />
    <label></label>
</div>

そして、次の CSS:

.checkbox_wrapper{
    position: relative;
    height: 16px;
    width: 17px;
}

input[type="checkbox"] {
    opacity:0;
    height: 16px;
    width: 17px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

input[type="checkbox"] + label{
    background:url('../images/unchecked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

input[type="checkbox"]:checked + label{
    background:url('../images/checked.png') no-repeat;
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
}

画像のルートを確認するだけで、幅と高さが画像の幅と高さと等しくなるはずです。フィドラーでは、base64 でエンコードされた画像を使用しています。

お役に立てば幸いです。

于 2013-11-28T14:47:12.480 に答える
3

隣接するラベルや周囲の div を使用せずに、別の方法を見つけました。

私のユースケースは、気の利いた TODO リストを生成するマークダウン パーサーがあり、それらのスタイルを設定したかったことです。生成された HTML を変更することはできなかったので、次の解決策を思い付きました。

次のようなチェックボックスを指定します。

<input type="checkbox" id="cb">

visibility: hidden次のように、チェックボックスとvisibility: visible::after でスタイルを設定できます。

#cb {
  visibility: hidden;
}

input#cb::after {
  visibility: visible;
  content: "F";
  color: red;
  background: green;
  padding: 8px;
}

input#cb:checked::after {
  content: " T ";
  color: green;
  background: red;
}
<!doctype html>
<html>

<body>
  <input type="checkbox" id="cb">
</body>

</html>

編集：

コメントの @connexo は、入力要素にコンテンツを含めることができないことを指摘しました。たとえば、次のようにラベル要素を使用して簡単に実行できます（これが間違っている場合は誰かが私を修正してください。テストするのに便利なWebkit以外のブラウザーはありません）。

#cb-span * {
  visibility: hidden;
}

input#cb + label::after {
  visibility: visible;
  content: "F";
  color: red;
  background: green;
  padding: 8px;
}

input#cb:checked + label::after {
  content: " T ";
  color: green;
  background: red;
}
<!doctype html>
<html>

<body>
  <span id="cb-span">
    <input type="checkbox" id="cb">
    <label for="cb"></label>
  </span>
</body>

</html>

チェックボックスは通常のものと同じように機能し、好きなようにスタイルを設定できます。

多分それは誰かを助けるでしょう（私はウェブ上でこのようなものを見つけていないので、ブックマークすることができます）

于 2017-06-02T19:19:34.203 に答える