chrome上的复选框问题答案

【问题标题】：Checkbox issue on chromechrome上的复选框问题
【发布时间】：2016-12-19 23:09:31
【问题描述】：

大家好，我对自定义复选框有一点问题。在 Mozilla 中，一切正常，但在 Chrome 中，它的工作方式不同。正如您在下面看到的第 1 列中的复选框在选中时工作正常，但在其他列中，它只是在选中时提供背景。我为所有复选框提供了相同的 CSS。它在 Mozilla 中看起来不同，我的意思是它运行良好。

   .listContent input[type=checkbox] {
    opacity: 0;
    float: left;
}
.listContent input[type=checkbox] + label {
    margin: 0 0 0 8px;
    position: relative;
    cursor: pointer;
    font-size: 16px;
}
.listContent input[type=checkbox] + label ~ label {
    margin: 0 0 0 40px;
}

.listContent input[type=checkbox] + label::before {
    content: ' ';
    position: absolute;
    left: -20px;
    top: 2px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    width: 14px;
    height: 14px;
    display: block;
    background: white;
    border: 1px solid #A9A9A9;
}
.listContent input[type=checkbox] + label::after {
    content: ' ';
    position: absolute;
left: -19px;
top: 3px;
width: 16px;
height: 16px;
    display: block;
    z-index: 1;
    background: url('../../jpgs/checked.png') no-repeat center center;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0.7) !important;
    opacity: 0;
}
.listContent input[type=checkbox]:checked + label::after {
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 1;
}
.listContent input[type=checkbox]:checked + label {
    color: #64bd5f;
}
.listContent input[type=checkbox]:checked + label::before {
    opacity: 1;
    background: #64bd5f;
}

【问题讨论】：

标签： html css checkbox input custom-element

【解决方案1】：

首先尝试使用以下命令重置 css：http://cssreset.com

【讨论】：

【解决方案2】：

查看此网站的 CSS 复选框样式：http://www.csscheckbox.com/。基本上，对于复选框样式，您将背景图像设置为包含选中和未选中状态的复选框，并根据复选框是否选中来操纵该图像的背景位置。

例如：

input[type=checkbox].css-checkbox + label.css-label {
                        padding-left:21px;
                        height:16px; 
                        display:inline-block;
                        line-height:16px;
                        background-repeat:no-repeat;
                        background-position: 0 0;
                        font-size:16px;
                        vertical-align:middle;
                        cursor:pointer;

                    }

                    input[type=checkbox].css-checkbox:checked + label.css-label {
                        background-position: 0 -16px;
                    }

我看到你做了类似的事情，你正在操纵不透明度而不是背景位置。我认为 background-position 可能更容易实现，它与使用 spritesheet 基本相同。

【讨论】：

【解决方案3】：

我找到了解决方案，“溢出：隐藏”的东西正在影响它。谢谢大家

【讨论】：