How to style a checkbox created using angularjs?

Question

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>

Your question is not clear to me, if you want to add some style, can't you just add a class and write the style in it? — Aayushi Jain
– Aayushi Jain, Commented Jun 19, 2017 at 4:35
i can override classes which are already added. is there anyway to customize checkbox with only css — Nithya Rajan
– Nithya Rajan, Commented Jun 19, 2017 at 5:31
I guess you are saying answer by yourself, you can add css in those classes and it will work, what customization do you need anyway? — Aayushi Jain
– Aayushi Jain, Commented Jun 19, 2017 at 5:33
You can style the checkbox easily, what you need to do is select the checkbox. To select something you must identify it, so the input element must have a CSS class or id that enables you to identify it. — Matt
– Matt, Commented Jun 19, 2017 at 5:33
Is there any kind of element arround the checkbox? I might be able to help you if there is. Post a little bit more HTML. — Red
– Red, Commented Jun 19, 2017 at 6:52

Sahan Serasinghe · Accepted Answer · 2017-06-19 05:38:55Z

1

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?

answered Jun 19, 2017 at 5:38

Sahan Serasinghe

1,67121 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to style a checkbox created using angularjs?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related