Looking for a simple angular class directive that applies background color

Question

I have a modal screen, a ng-repeat displays a list of checkboxes with ng-model. I discovered the ng-modal is making the checkbox displays a green border.

        <div class="modal-body">
        <span ng-repeat="ptField in myForm.fieldsFromType" ng-hide="getFieldIndex(ptField.name) != -1">
            <label class="checkbox" for="{{item.id}}">
                <input type="checkbox" ng-model="ptField.checked" id="{{item.id}}"> {{ptField.label}}
            </label>
        </span>
    </div>

I added a style to the checkbox background-color: #FFFFFF; this removed the green border.

I would like to build a really simple directive that would be used for all checkboxes that appear to have green border displayed. what is the best way to do it?

Answer 1

No directive needed.

.modal-body input[type='checkbox'] {
  background-color: #FFF;
}

Unless you meant 'ng-model' and not 'ng-modal' in your question, in which case:

input[type='checkbox'][ng-model] {
  background-color: #FFF;
}

Answer 2

If you have to use a directive for some reason, rather than a CSS class, here how you could do it.

.directive('checkbox', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      var color = "red";
      elem.css({"background-color":color});
    }
  }
});