html - 如何设置使用 angularjs 创建的复选框的样式？

Question

如何使用 css 自定义复选框？我无法更改 html，因为不允许在我的公司自定义 html。我只能向应用程序添加 css。所以，如果有任何方法我可以使用纯 css 自定义复选框。

这是从 AngularJS 创建的代码

  <label class="form-lbl ng-binding ng-scope" ng-repeat="item in chkdatasource.rows">
        <input class="form-control form-chkgrp ng-scope ng-pristine ng-valid ng-valid-required ng-touched" dirctrl="" type="checkbox" checklist-value="item.CODE" ng-disabled="Disable" ng-required="ctl.required" ng-change="Handle_Change();" ng-model="checked" checklist-model="data[ctl.target_column]" style=""> License
    </label>

Answer 1

我创建了一个 JSFiddle给你一个想法来解决你的问题。如果您将 jQuery 集成到您的 Angular 元素中，您可以获得我的代码的注释部分。否则使用它的第一部分:

var pureElement = angular.element(document.getElementsByName("WAIVE_CHARGES"));
pureElement.css('width','30px');
pureElement.css('height','26px');

此外，设置复选框的样式可能具有挑战性。您可能还想看看 SO 中的这个流行链接:

How to style checkbox using CSS?