Question

我不相信这个问题是重复的，我已阅读Pure CSS Checkbox Image replacement，我正在从http://www.hongkiat.com/blog/css3-checkbox-radio/

中获取代码

我的问题是我不想为我的复选框使用ID，因为这是一个模板，许多可能包含在同一页面上。我几乎把所有东西都搞定了但是我无法选择标签：在选中复选框之前将其更改为不同的背景颜色。

HTML

<label><input type="checkbox" /></label>

CSS（最后一个选择器是我试图开始工作的那个）

input[type="checkbox"] {
    display:none;
}

label {
    display: inline-block;
    cursor:pointer;
    position:relative;
    font-size:13px;
    top:0;
    right:-30px;
    width:16px;
}

label:before {
    content: "";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    background-color:#aaa;
}

input[type="checkbox"]:checked + label:before {
    content:"";
    background:#219161;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    height:16px;
    width:16px;
    display:inline-block;
    padding:0 0 0 0;
}

Answer 1

您可以在label内添加额外的范围，但在input之后添加额外范围并使用

上的伪元素

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  font-size: 13px;
  top: 0;
  right: -30px;
  width: 16px;
}
label span:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #aaa;
}
input[type="checkbox"]:checked + span:before {
  content: "";
  background: #219161;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 16px;
  width: 16px;
  display: inline-block;
  padding: 0 0 0 0;
}

<label>
  <input type="checkbox" /><span></span>
</label>

Answer 2

JS解决方案供参考，我在发布后留下了CSS答案以供将来参考

HTML（加载到具有thisTemplateID的templateID的div）

<label><input type="checkbox" class="checkboxtype1" /></label>

JS

$('#' + thisTemplateID + " .checkboxtype1").bind('change', function() {
            if ( $( this ).prop("checked") ) {
                $(this).parent('label').addClass('ticked');
            } else {
                $(this).parent('label').removeClass('ticked');
            }
});

CSS

label {
    display: inline-block;
    cursor:pointer;
    position:relative;
    font-size:13px;
    top:0;
    right:-30px;
    width:16px;
    }

label:before {
    content: "";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    background-color:#aaa;
    }

label.ticked:before {
    content:"";
    background:#219161;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    height:16px;
    width:16px;
    display:inline-block;
    padding:0 0 0 0;
}

如何使用没有id的标签替换复选框

2 个答案: