Question

我想基于:checked选择器仅使用 CSS更改复选框（或标签或其他元素）的颜色。以下是我拥有的HTML，并且假设我无法更改。

<div class="chk">
    <label>
        CheckMe
        <input type="checkbox" id="myCheckBox">
    </label>
</div>

我曾尝试在CSS中使用input[type="checkbox"] + label:before，但由于label实际上是持有复选框，而不是紧随其后，因此无法使用。

我也尝试过在标签和复选框之后创建伪元素，但也无法使其正常工作。

基本上，我正在寻找这种功能：http://jsfiddle.net/zAFND 但仅使用 CSS ，不幸的是，我无法更改HTML 。

Answer 1

您可以使用Jquery来实现。

$("input").click(function() { 
    $(this).parent().toggleClass('checked');
})

当输入更改时，这会将类checked切换到父类label

现在您可以根据需要对其进行样式设置。

$("input").click(function() { 
    $(this).parent().toggleClass('checked');
})

  label { 
    padding: 10px 20px;
    border-radius: 3px;
}

.checked { 
    background-color: red;
    color: white;
}

<div class="chk">
      <label>
        CheckMe
        <input type="checkbox" id="myCheckBox" />
      </label>
      <script src="node_modules/jquery/dist/jquery.js"></script>
      <script src="index.js"></script>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

input[type="checkbox"]:checked {
border-radius: 2px;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width: 17px;
height: 17px;
cursor:pointer;
position: relative;
top: 5px;
background-color:#409fd6;
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;

}

<div class="chk">
    <label>
        CheckMe
        <input type="checkbox" id="myCheckBox">
    </label>
</div>

Answer 3

解决方案：您可以尝试使用此代码...

label{
  position: relative;
  padding: 15px;
  color: #000;
  z-index: 1;
  margin-top: 20px;
  display: block;
}
input{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  outline: none;
}
input:after{
  content: "";
  top: 0;
  left: 0;
  display: block;
  width: 86px;
  height: 42px;
  position: absolute;
  background-color: #ccc;
  z-index: -1;
  border-radius: 4px;
}
input:checked::after{
  background-color: red;
}

<div class="chk">
    <label>
        CheckMe
        <input type="checkbox" id="myCheckBox">
    </label>
</div>

如何基于：checked更改复选框的外观，而没有其他元素

3 个答案: