CODEWITHSUNDEEP
htmlangularjscsscheckboxtwitter-bootstrap-3
Nithya Rajan
Nithya Rajan

Reputation: 4884

How to style a checkbox created using angularjs?

How can I customise the checkbox by using css? I am not able to change the html because am not allowed to customise the html in my company. I can only add css to the application. So, if there's any way that I can customise the checkbox using pure css.

here is the code created from 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>

Upvotes: 0

Views: 2602

Answers (1)

Sahan Serasinghe
Sahan Serasinghe

Reputation: 1651

I created a JSFiddle to give you an idea to tackle your problem. If you have jQuery integrated with your angular project you can get the commented part of my code. Else use the first part of it:

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

Also, styling a checkbox can be challenging. You may want to have a look at this popular link in SO as well:

How to style checkbox using CSS?

Upvotes: 1

Related Questions