Question

我正在使用Bootstrap插件awesome-bootstrap-ckeckbox，我也在使用ASP.NET MVC，然后我的所有复选框都呈现两个输入，一个作为复选框输入，另一个作为隐藏输入，因为我修改了CSS选择器，例如：

HTML代码

<div class="checkbox">
   <input id="checkbox1" type="checkbox">
   <input type="hidden" />
   <label for="checkbox1">
      Default
   </label>
</div>
<div class="checkbox checkbox-primary">
   <input id="checkbox2" type="checkbox" checked>
   <input type="hidden" />
   <label for="checkbox2">
       Primary
    </label>
 </div>

CSS代码

/* awesome-bootstrap-checkbox */
.checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'FontAwesome';
  content: "\f00c"; 
}
.checkbox input[type="checkbox"]:disabled + label::before {
    background-color: #eeeeee;
    cursor: not-allowed; 
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #428bca;
    border-color: #428bca; 
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff; 
}

/* my own version */
.checkbox input[type="checkbox"]:checked + input + label::after {
  font-family: 'FontAwesome';
  content: "\f00c"; 
}
.checkbox input[type="checkbox"]:disabled + input + label::before {
    background-color: #eeeeee;
    cursor: not-allowed; 
}
.checkbox-primary input[type="checkbox"]:checked + input + label::before {
    background-color: #428bca;
    border-color: #428bca; 
}
.checkbox-primary input[type="checkbox"]:checked + input + label::after {
    color: #fff; 
}

除了Safari 7.1之外，它在所有现代浏览器中运行良好，令人难以置信的原始作品，但我的修改不是，我认为问题在于兄弟选择器。任何想法???

Plunker代码：Example

Answer 1

这是Safari中的一个已知错误（不确定Safari 8）和旧版Chrome。有几种解决方法，但我在实践中使用的只是将+替换为~组合器：

.checkbox input[type="checkbox"]:checked ~ input ~ label::after

此处还有解决同一错误的其他问题：

Safari 7.1 CSS兄弟选择器的问题

1 个答案: