How to use images instead of Radio Button

Question

I have one form, where, I want to use images instead of radio button. How can I show multiple images, instead of radio button. For example- gender with 'male' & 'female' image. It should be functional. I want to hide the radio buttons and place the images instead. I got one solution from stack overflow and here is the fiddle:

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

.cc-selector-2 input{
    position:absolute;
    z-index:999;
}

.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;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);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
* { font-family:monospace; }
.cc-selector-2 input{ margin: 5px 0 0 12px; }
.cc-selector-2 label{ margin-left: 7px; }
span.cc{ color:#6d84b4 }

<form>
    <p>Previously:</p>
    <div>
        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
        <label for="a1">Visa</label><br/>
        <input id="a2" type="radio" name="a" value="mastercard" />
        <label for="a2">Mastercard</label>
    </div>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
    
    
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

But here, the problem arises, when I change the input id to some different name and it doesn't work. Can anyone help me, as this is a very short and easy method and i want to go with this. You can change the input id to 'visa1' and see the result.

Answer 1

If you changed the input "id" means , change the relevant label "for" too.

For example :

If you change input id as 'visa1' means change the relevant label for="visa1"

<input checked="checked" id="visa1" type="radio" name="credit-card" value="visa" />
<label class="drinkcard-cc visa" for="visa1"></label>

Run the below snippet:

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

.cc-selector-2 input{
    position:absolute;
    z-index:999;
}

.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;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);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
* { font-family:monospace; }
.cc-selector-2 input{ margin: 5px 0 0 12px; }
.cc-selector-2 label{ margin-left: 7px; }
span.cc{ color:#6d84b4 }

<form>
    <p>Previously:</p>
    <div>
        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
        <label for="a1">Visa</label><br/>
        <input id="a2" type="radio" name="a" value="mastercard" />
        <label for="a2">Mastercard</label>
    </div>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input checked="checked" id="visa1" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa1"></label>
        <input id="mastercard1" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard1"></label>
    </div>
    
    
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

Answer 2

well of'course it won't work if you change the id, because CSS style target those ID's. So you'll have to find in code everywhere and rename all of them in order for it to work again.

the code you showed is pretty ugly too, riddled with a bunch of css selectors. if you're new to coding you might want to just try different types of solutions. there's hundreds of em. i'd personally recommend: minimum code = best. here's one with jquery.

$('#sex').html('male');

$("#male").bind("mousedown", function() {
  sex = 'male';
  $('#male').css('opacity','1');
  $('#female').css('opacity','0.2');
  $('#sex').html('male');
});

$("#female").bind("mousedown", function() {
  sex = 'female';
  $('#female').css('opacity','1');
  $('#male').css('opacity','0.2');
  $('#sex').html('female');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id='male' src='http://cliparts.co/cliparts/pT7/KBR/pT7KBR6gc.png' style='width:50px;height:50px'>

<img id='female' src='http://www.clipartbest.com/cliparts/9i4/o7b/9i4o7breT.png' style='width:30px;height:50px;opacity:0.2'>

<div id='sex' style='text-align:center;width:90px;margin-top:10px;font-size:12px;'>
</div>

Answer 3

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

    .cc-selector-2 input{
        position:absolute;
        z-index:999;
    }

    .visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
    .mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

    .cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
    .cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
        -webkit-filter: none;
           -moz-filter: none;
                filter: none;
    }
    .drinkcard-cc{
        cursor:pointer;
        background-size:contain;
        background-repeat:no-repeat;
        display:inline-block;
        width:100px;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);
    }
    .drinkcard-cc:hover{
        -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
           -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
                filter: brightness(1.2) grayscale(.5) opacity(.9);
    }

    /* Extras */
    a:visited{color:#888}
    a{color:#444;text-decoration:none;}
    p{margin-bottom:.3em;}
    * { font-family:monospace; }
    .cc-selector-2 input{ margin: 5px 0 0 12px; }
    .cc-selector-2 label{ margin-left: 7px; }
    span.cc{ color:#6d84b4 }
	
	form input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}

<form>
        <p>Previously:</p>
        <div>
            <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
            <label for="a1">Visa</label><br/>
            <input id="a2" type="radio" name="a" value="mastercard" />
            <label for="a2">Mastercard</label>
        </div>
        <p>Now, with CSS3: </p>
        <div class="cc-selector">
            <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
            <label class="drinkcard-cc visa" for="visa"></label>
            <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
            <label class="drinkcard-cc mastercard"for="mastercard"></label>
        </div>
        
        
    </form>
    <small><a href="https://github.com/rcotrina94/icons">
        &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

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

.cc-selector-2 input{
    position:absolute;
    z-index:999;
}

.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;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);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
* { font-family:monospace; }
.cc-selector-2 input{ margin: 5px 0 0 12px; }
.cc-selector-2 label{ margin-left: 7px; }
span.cc{ color:#6d84b4 }

<form>
    <p>Previously:</p>
    <div>
        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
        <label for="a1">Visa</label><br/>
        <input id="a2" type="radio" name="a" value="mastercard" />
        <label for="a2">Mastercard</label>
    </div>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
    
    
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

Answer 4

try this http://www.csscheckbox.com/css-checkbox-generator.php its a free online tool for generating crossbrowser compatible custom checkbox/radio button, you may have to upload the images for checked and uncheck state