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