CODEWITHSUNDEEP
ionic-framework
Shruti
Shruti

Reputation: 1574

how to add image on checkbox using ngclass ..?

could you please tell me how to add checkbox image using ng-class in angular js Actually when user click option it show the checkbox image and when user select again same element it unselect the checkbox or remove the checkbox image how I will achieve this using ng-class

here is my plunker : http://plnkr.co/edit/fHdnWwIRgi5jFLQlCWKs?p=preview

I need check box on right side which I am able to do but I need to use background image of checkbox ("green one") instead of default one.In image it is display ar blue I need green which is given in css

.backgrounfimageset{
    background-image:url('http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png');
  }
 .liposition{
   position:relative;
 }
 .checkboxposiion{
   position:absolute!important;
   right:10px;
 }

Upvotes: 0

Views: 1103

Answers (1)

Balaji Marimuthu
Balaji Marimuthu

Reputation: 2058

the ng-class reference is correct for add the image, but need to be override the default css like as below. 

<style>
.backgrounfimageset{
    background-image:url('http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png') !important;
    background-size: cover !important;
  }
   .backgrounfimageset:before{
     background-color: inherit !important;
  border-radius: 0px !important;
  border-style: none !important;
   }
</style>

and if you unselect the checkbox, don't want to be display the checkbox you need to override the .checkbox input css.

Upvotes: 1

Related Questions