How to Style Radio Buttons with Images - Laughing Smiley for Good, Sad Smiley for Bad

Use images instead of radio buttons

• Wrap radio and image in <label>
• Hide radio button (Don't use display:none or visibility:hidden since such will impact accessibility)
• Target the image next to the hidden radio using Adjacent sibling selector +
• Don’t forget to provide alternative text in the alt attribute, especially since it functions as the radio button’s label

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>

Django Crispy Forms: Replace Label and Radio Buttons with Images

I'm the lead developer of crispy-forms. You could do this using Field layout object and using a custom template.

Field('field_name', template="custom_inline_radio.html")

Other option you have is to create your own layout object subclassing InlineRadio. That way you would only have to do:

CustomInlineRadio('field_name')

Actually, what you try to do is basically override the output of a default widget in Django and that probably makes more sense if you use a custom widget in your Django form, crispy-forms will play great with it. I wrote an article on widgets and Django forms that might interest you.

Use jQuery to select all labels of radio button group

Use the ATTR contains selector

$('label[for*="radio"]').click(function(){
    ...
});

This would work for and label that contains radio within the for attribute

Eq.

<input type="radio" name="emotion" id="radio_sad" />
<label for="radio_sad">Sad</label>
<input type="radio" name="emotion" id="radio_happy" />
<label for="radio_happy">Happy</label>

---

Update

For you html code you can do the following.

$('#radio_options label').click(function(){

});

ASP.NET MVC Multi-language feature does not work as expected

In the first code block (using <input type="radio" .. />), you form will only post back one value for culture (the value of the selected radio button).

In the second code block (using <input type="image" .. />) your form will post back the values of both inputs, so your form data is culture=en-US&culture=tr

The DefaultModelBinder will bind the first value and ignore the second value so the value of culture in the POST method will always be "en-US" irrespective of which image you click.

One option would be to disable the other input (disabled inputs do not post back a value, for example

$(".culture").click(function () {
    $(this).siblings().prop('disabled', true); // disable the other input
    $(this).parents("form").submit(); // post form
});

Another option for handling this is to use <img> tags in conjunction with a hidden input for the culture value

<input type="hidden" name="culture" id="culture"/>
<img src="~/Content/Images/en.png" data-culture="en-US" class="culture" />
<img src="~/Content/Images/tr.png" data-culture="tr" class="culture" />

$('.culture').click(function () {
    $('#culture').val($(this).data('culture')); // update the hidden input
    $('form').submit();
})

---

Related Topics