How to remove the checkmark from ion-radio

ionic-v1
1

I’ve created a custom look and feel for a list of ion-radio items

<ion-radio ng-repeat="item in clientSideList"
        ng-value="item.value"
        ng-model="data.serverSide"
        ng-change="serverSideChange(item)"
        required>
                {{ item.text }}
</ion-radio>

But I can’t seem to get rid of the checkbox that appears whenever a user clicks an item

image
Screen Shot 2015-03-19 at 4.21.39 PM.png592×634 14 KB

I notice that the ion-checkbox icon is being inserted into the DOM by the ionic library itself. So how can I override this? Do I have to remove the directive from the DOM using Javascript? I’d love some help if figuring this out. Many thanks!

2

You can use standard HTML input tags and then the icon becomes optional

Example:

<label class="item item-radio" ng-repeat="item in clientSideList">
  <input type="radio" ng-model="data.serverSide" ng-value="item.value">
  <div class="item-content">
    {{ item.text }}
  </div>
</label>
2 Likes
3

Thank you this worked! You make it look so easy.

1 Like
4

Ditto! Much simpler than attempting to override child element CSS, thanks!

1 Like