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

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

我不想触碰父CSS。因为我们正在使用第三方框架进行样式设计

我已尝试将id添加到父CSS中的“not”选择器。很不幸，我不能修改它。我需要另一种方法。请参阅下面的JSFIDLE

HTML:

---

只需在css中使用类即可

<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>

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

<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/>

.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);
}