CSS - 子复选框应该忽略父复选框 css

Question

我的应用程序中的复选框有一个通用的 CSS。但我想在几个地方摆脱这种自定义时尚的 CSS。它应该显示为默认复选框，而不是自定义复选框。

而且我不想触及父 CSS。因为我们正在使用第 3 方框架进行样式设置。

我已经尝试将 id 添加到父 CSS 中的“not”选择器。不幸的是我无法修改它。我需要一种替代方法。请引用下面的jsfiddle。

HTML:

<input type="checkbox" href="#" class="menu-open" id="menu-open"/>
<label>Custom Css - ok</label>
<br/>
<input type="checkbox" href="#" class="menu-open" id="menu-open1"/>
<label>Custom Css - ok</label>
<br/>
...<br/>
...  
<br/>
<h5>Below checkbox should display as default (without styling)</h5>
<input type="checkbox" href="#" class="menu-open" id="normal"/>
<label>It should be default</label>

CSS

input[type="checkbox"] {
  -webkit-appearance: none;
  height: 1.618em;
  width: 1.618em;
  cursor: pointer;
  position: relative;
  -webkit-transition: .15s;
  border-radius: 2em;
  background-color: #900;
  margin-right: 1em;
  margin-top: .53em;

}
input[type="checkbox"]:checked + label{
  background-color: green;
}
input[type="checkbox"]:not(:checked) + label{
  color: blue;
}
input[type="checkbox"]:before,
input[type="checkbox"]:checked:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 2.818em;
  text-align: center;
  color: #fff;
  content: "'";
  font-family: 'WebSymbolsRegular';
  font-size: .618em;
}
input[type="checkbox"]:checked:before {
  content: '.';
}
input[type="checkbox"]:hover:before {
  background: rgba(255, 255, 255, 0.3);
}

http://jsfiddle.net/vh2nothv/2/

Answer 1

只需在您的 CSS 中使用类。

http://jsfiddle.net/pratyush141/age91svr/

<input type="checkbox" href="#" class="menu-open" id="menu-open"/>
<label>Custom Css - ok</label>
<br/>
<input type="checkbox" href="#" class="menu-open" id="menu-open1"/>
<label>Custom Css - ok</label>
<br/>

<input type="checkbox" href="#" class="menu-open1" id="menu-open1"/>
<label>Custom Css - ok</label>
<br/>
...<br/>
...  
<br/>

CSS

.menu-open {
  -webkit-appearance: none;
  /* Hides the default checkbox style */
  height: 1.618em;
  width: 1.618em;
  cursor: pointer;
  position: relative;
  -webkit-transition: .15s;
  border-radius: 2em;
  background-color: #900;
  margin-right: 1em;
  margin-top: .53em;

}
.menu-open:checked + label{
  background-color: green;
}
.menu-open:not(:checked) + label{
  color: blue;
}
.menu-open:before,
input[type="checkbox"]:checked:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 2.818em;
  text-align: center;
  color: #fff;
  content: "'";
  font-family: 'WebSymbolsRegular';
  font-size: .618em;
}
.menu-open:checked:before {
  content: '.';
}
.menu-open:hover:before {
  background: rgba(255, 255, 255, 0.3);
}