Html - CSS3- ionic - image as a radio button

HTML:
 <div class="cc-selector">
<div style="   padding: 0px; " class="row">
<div class="col col-33">
        <input ng-model="choice.value" id="lessSpicy" type="radio" name="credit-card" ng-value="'1'"  />
        <label class="drinkcard-cc lessSpicy" for="lessSpicy"></label>
</div>
<div class="col col-33">
        <input ng-model="choice.value" id="spicy" type="radio" name="credit-card" ng-value="'2'"/>
        <label class="drinkcard-cc spicy"for="spicy"></label>
</div>
<div class="col col-33">
        <input ng-model="choice.value" id="extraSpicy" type="radio" name="credit-card" ng-value="'3'"/>
        <label class="drinkcard-cc extraSpicy" for="extraSpicy"></label>
</div>
</div>
    </div>

CSS:

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;

}

.lessSpicy{background-image:url("../img/spice/Mild.png");}
.extraSpicy{background-image:url("../img/spice/Hot.png");}
.spicy{background-image:url("../img/spice/Medium.png");}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .1;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
opacity: .9;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:80px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
opacity: .5;

}