Chrome

Question

嘿伙计们，我对自定义复选框有点问题。 Everyhting在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;
}

Answer 1

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

Answer 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;
                    }

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

Answer 3

我找到了解决方案，'溢出：隐藏'的事情正在影响它。谢谢大家