Question

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

我不想触摸父CSS。因为我们使用第三方框架进行样式化。

我尝试在父CSS中将'id'添加到'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中使用class。

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

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

1 个答案: