Home Forums Feature Requests Adjustments in Checkbox and Radio using images


Adjustments in Checkbox and Radio using images

  • @elliot

    This is not documented but ACF accept an image for Checkbox and Radio elements using the HTML image tag.

    0 : <img src="/path/image.jpg">
    1 : <img src="/path/image.jpg">

    But it needs some adjustment to fit better. I think this could be in ACF by default and documented.

    /* Images for Checkbox and Radio */
    .acf-checkbox-list img,
    .acf-radio-list img { margin: 5px 2px; vertical-align: middle; }

    The result is attached

  • Hi @edir

    That’s a nice catch 🙂

    I will assign Elliot to this post so he’s sure to see it.

  • Maybe Checkbox and Radio Columns could be implemented too :-p

  • If ACF were to include columns per default I think the best solution would be to have that as an additional layout option for the checkbox/radio field (select how many columns you want) rather than by class tho 🙂

  • You can add a “img-select” class attribute to field, and use this CSS :

    .acf-field.img-select .acf-checkbox-list input,
    .acf-field.img-select .acf-radio-list input{
    .acf-field.img-select .acf-checkbox-list img,
    .acf-field.img-select .acf-radio-list img {
        border: 2px solid transparent;
    .acf-field.img-select .acf-checkbox-list input:checked + img,
    .acf-field.img-select .acf-radio-list input:checked + img {
        border: 2px solid #444;


  • Does anybody know how to link a value add to cart to this checkbox image code?

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Adjustments in Checkbox and Radio using images’ is closed to new replies.