Replace checkbox with images angularjs

Question

I have to style/replace all checkboxes and radio buttons with images. I can do this easily by simply adding a span tag after every input(checkbox / radio) like.

<label for="rememberme">
  <input type="checkbox" class="unique" id="rememberme"/>
  <span class="icon-checkbox"></span>
</label>

How can i do this in angular js. I cannot modify all htmls with adding a span element, as if something went wrong it will take time to revert.
But i have a unique class or i can add an attribute to write a directive.

I tried using an attribute but i am unable to inspect span element generated, it is working good if i use it as an element.

If i use as an attribute it is giving an output as

<input type="text" class="form-control" custom-input="">
   <input type="text" class="form-control">
   <span class="icon-checkbox">Checkbox icon</span>
</input>

is this Valid ?

Plunker here

show-me-the-code · Accepted Answer · 2015-09-29 04:46:08Z

1

I wouldn't worry about a custom directive just to replace the checkboxes with images. You could do this with CSS like this:

<!--HTML-->
<input type="text" class="form-control checkboxwithicon">

/*CSS*/
.checkboxwithicon{
  position:relative;
}
.checkboxwithicon::after{
  content:url('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/check-icon.png');
  position:absolute;
  top:-10px;
  left:15px;
}

And position the image properly so that the checkbox is hidden.

answered Sep 29, 2015 at 4:46

show-me-the-code

1,5631 gold badge13 silver badges14 bronze badges

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

5 Comments

Naresh217 Over a year ago

Have you tried this approach. I believe we dont have before or after pseudo elements on input tag

show-me-the-code Over a year ago

Certainly works on checkboxes. See [this] (plnkr.co/edit/cYWcRGKdAMWAyABF7JPf?p=preview).

show-me-the-code Over a year ago

Apparently so. I would wrap the checkbox with a <span> and add the pseudo-class to the span element. You could build the directive to do it for you. Not sure if that is what you are interested in. But here you go for a solution that works on FF: plnkr.co/edit/26Exgf8Nx2KYueBXUYVR?p=preview just in case.

Naresh217 Over a year ago

Yes this works. But need to change lot of htmls, and if required to revert could be time consuming. I am looking for something which i can write a directive for <input> tag directly and inject a span. If required i can remove directive definition from one place. I am trying Telvin approach

show-me-the-code Over a year ago

Sure, you could use a custom directive like this plnkr.co/edit/LCfrEjYTXCDxSypsIUwZ?p=preview from your original Plunk.

Telvin Nguyen · Accepted Answer · 2015-09-29 04:18:03Z

0

You can write a directive that does generate the span icon-checkbox after the element (it's supposed to be a checkbox) for you and make it act like an attribute, then you can tag it in every input checkbox that you want. Even something wrong happens and you are not happy with the change, you don't have to waste your time and effort to revert the things back, just modify on the directive only.

answered Sep 29, 2015 at 4:18

Telvin Nguyen

3,5694 gold badges29 silver badges40 bronze badges

Comments

Naresh217 · Accepted Answer · 2015-09-29 22:15:15Z

0

I made it working from your suggestions with out any change to HTML for easy fallback

.directive('input',function(){
    return{
        require: '?ngModel',
        restrict:'EAC',
        link:function(scope,element,attr){
          var html = angular.element("<span class='icon-checkbox'>Checkbox icon</span");

          if( (angular.lowercase(element[0].tagName)==="input") && (angular.lowercase(attr.type)=== "checkbox"))
              element.after(html)
        }
    }
})

Working Plunker

answered Sep 29, 2015 at 22:15

Naresh217

4201 gold badge7 silver badges23 bronze badges

Collectives™ on Stack Overflow

Replace checkbox with images angularjs

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related