Question

我试图覆盖angular.js中的复选框css。它适用于普通的javascript代码。

Plunker：https://plnkr.co/edit/gkWm0lgEZ7N88TINcsRS?p=preview

如果删除css，它可以正常工作。

<input type="checkbox" ng-model="checkboxModel.value1" >

CSS：

  input[type=checkbox]:checked + label:before {
  content: '';
  text-shadow: 1px 1px 1px #10758C;
  font-size: 24px;
  color: #f3f3f3;
  text-align: center;
  line-height: 24px;
  background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important;
}

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 28px;
  margin-right: 12px;
  font-size: 16px;
  line-height: 22px;
  font-weight: bold;
}

input[type=radio], input[type=checkbox] {
  display: none;
}

label:before {
  font-weight: normal;
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_1.gif?v1');
}

Answer 1

问题是所使用的'+'css选择器无法找到任何匹配的DOM，即标签正在包装输入，并且在输入之后/之后没有标签存在，根据Plunker链接中的DOM结构。

方法1：您可以使用以下DOM结构并修改CSS以将所有出现的标签替换为i

<label>
    <input />
    <i></i>
</label>

方法2：您可以使用以下DOM结构并修改CSS以将所有出现的标签替换为input + label（以避免将css应用于包装器标签）。 [注意，此方法需要复选框具有id，并且后面的标签具有for属性。]

<label>
   <input id="chk1" />
   <label for="chk1"></label>
</label>

希望这有帮助！

无法覆盖angularjs

1 个答案: