How to replace replace radio buttons with images? [duplicate]

问题:

This question already has an answer here:

• Use images instead of radio buttons 6 answers

I would like to, instead of the standard radio button, use distinct images for each radio button. For the selected state I would like for a border to appear around the image.

I have tried making the images labels for the radio button and then hiding the button, but that seems to break the functionality for some reason.

I also have come across this article: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ which I could potentially somehow twist to my purposes.

Is there an easier/better way?

回答1:

• DEMO: http://so.devilmaycode.it/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-fo/

jQuery

        $('input:radio').hide().each(function() {             $(this).attr('data-radio-fx', this.name);             var label = $("label[for=" + '"' + this.id + '"' + "]").text();             $(''+                 '').insertAfter(this);         });         $('a.radio-fx').on('click', function(e) {             e.preventDefault();             var unique = $(this).attr('data-radio-fx');             $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');             $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);             $(this).find('span').attr('class','radio-checked');             $(this).prev('input:radio').attr('checked',true);         }).on('keydown', function(e) {             if ((e.keyCode ? e.keyCode : e.which) == 32) {                 $(this).trigger('click');             }         }); 

• full code in demo source;

回答2:

Yes, there is! This is an example of the simple ways:

No need for javascript

CSS

.radio_item{ display: none !important; }  .label_item { opacity: 0.1; }  .radio_item:checked + label { opacity: 1; } 

HTML

FIDDLE

回答3:

I haven't looked into it, but this sounds promising: http://www.thecssninja.com/css/custom-inputs-using-css

回答4:

I can propose two different solutions:

CSS SOLUTION:

/*   Hide radio button (the round disc)   we will use just the label to create push button effect */ input[type=radio] {     display:none;      margin:10px; }  /*   Change the look'n'feel of labels (which are adjacent to radio buttons).   Add some margin, padding to label */ input[type=radio] + label {     display:inline-block;     margin:-2px;     padding: 4px 12px;     background-color: #e7e7e7;     border-color: #ddd; } /*  Change background color for label next to checked radio button  to make it look like highlighted button */ input[type=radio]:checked + label {     background-image: none;     background-color:#d0d0d0; } 

with HTML

iPhone Galaxy S IV Nexus S  

JAVASCRIPT SOLUTION

Demo Here

回答5:

I had the same problem only a short while ago and found this jQuery solution which works perfectly and degrades nicely:

http://www.adamcoulombe.info/lab/jquery/select-box/

I used it to custom style select drop downs. It is very easy to implement. Replace the variable from $('.mySelectBoxClass') which targets the class to $('select') for example - and this would target all select elements on your page. The same rule would apply for radio buttons.

回答6:

I don't think you'll find an easier way to do it than the link you added to your question. That is the only way I know of. I think you effectively answered your own question. Isn't there a badge for that or something?

Also, a similar question was answered here: Styling checkboxes, radio buttons and dropdowns

It contains a few more pre-built solutions that you can check out. Without more information on what you are trying to accomplish visually, I can't say if any of them will work for you.

Good luck!

回答7:

There is a bug with aSeptik's solution where if you click a checked radio button, it unchecks it. I corrected it by making the adjustment below.

$('a.radio-fx').on('click', function(e) {         e.preventDefault();         if($(this).prev('input:radio').is(':checked')) return;         ... 

so...

$('input:radio').hide().each(function() {         $(this).attr('data-radio-fx', this.name);         var label = $("label[for=" + '"' + this.id + '"' + "]").text();         $(''+             '').insertAfter(this);     });     $('a.radio-fx').on('click', function(e) {         e.preventDefault();         if($(this).prev('input:radio').is(':checked')) return;         var unique = $(this).attr('data-radio-fx');         $("a[data-radio-fx='"+unique+"'] span").attr('class','radio');         $(":radio[data-radio-fx='"+unique+"']").attr('checked',false);         $(this).find('span').attr('class','radio-checked');         $(this).prev('input:radio').attr('checked',true);     }).on('keydown', function(e) {         if ((e.keyCode ? e.keyCode : e.which) == 32) {             $(this).trigger('click');         }     }); 

Thank you aSeptik for the great solution!

回答8:

very simple solution that i found on the net.

http://jsbin.com/image-instead-of-radio-button/3/edit?html,css,output

文章来源: How to replace replace radio buttons with images? [duplicate]