自定义css复选框在两个表之间以不同方式显示

Question

所以我正在构建一个设置页面，用户可以在其中更改设置（duh），其中很大一部分是隐私复选框（如果他们想要隐私或显示某些内容），那么我目前正在为用户构建自定义复选框点击。

但有一个问题：与主要内容相比，边栏中的刻度显示不同？它的目标是相同的代码，并且它没有被过度使用，因为复选框有1个样式表，而且复选框一词甚至没有出现在任何其他样式表中。

这是我的意思的一个例子：

这是复选框的样式表（我打破它们，因为我的主样式表已经有850多行代码......）：

input[type="checkbox"], input[type="radio"]{
cursor: pointer;
position: absolute;
opacity: 0;
z-index: 2;
}

input[type="checkbox"] + span,
input[type="radio"] + span{
border:1px solid #c4f0f6;
/*border-radius: 4px;*/
/*box-shadow: 0 2px 0 0 #c4f0f6;*/
display: inline-block;
height:18px;
margin-bottom:-4px;
margin-right:6px;
width:18px;
background-color: #c4f0f6;
}

input[type="checkbox"]:checked + span,
input[type="radio"]:checked + span{
border-color:#c4f0f6;
/*box-shadow: 0 2px 0 0 #8bf0b5;*/
position: relative;
}

input[type="checkbox"]:checked + span:after,
input[type="radio"]:checked + span:after{
/*background-color:#43a6b5;
border-radius: 2px;*/
position: absolute;
content:'✔';
display: block;
height:15px;
margin: 1px 0 0 3px;
width: 10px;
}


input[type="radio"] + span,
input[type="radio"]:checked + span:after{
/*border-radius: 50%;*/
}

input[type="checkbox"]:checked ~ label, input[type="radio"]:checked ~  label{color:#25c266;}
input[type="checkbox"]:disabled + span, input[type="radio"]:disabled + span{border- color: #dedede;/*box-shadow: 0 1px 0 0 #efefef;*/}
input[type="checkbox"]:disabled + span:after, input[type="radio"]:disabled +      span:after{background-color:#dedede;}
input[type="checkbox"]:disabled ~ label, input[type="radio"]:disabled ~      label{color:#b2bbc0;}
#main_details_change label, #privacy_settings label, #notifications_settings label {  display: none; }

感谢您的帮助！

Answer 1

我猜样式表中有一个拼写错误：

border- color: #dedede;

而不是

border-color: #dedede;

如果不是这种情况，请检查颜色＆＃39;复选框看起来不同的父母的风格。它可能会被继承，我可以找到的复选框的唯一区别是它们的颜色＆＃39;。