Use images instead of radio buttons

Question

If I have a radio group with buttons         how can I show only images in the select option instead of the buttons  e g

User · Accepted Answer

Wrap radio and image in  lt label gt  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     x000D   x000D     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    x000D   lt label gt     lt input type  radio  name  test  value  small  checked gt     lt img src  http   placehold it 40x60 0bf fff amp text A  gt   lt  label gt    lt label gt     lt input type  radio  name  test  value  big  gt     lt img src  http   placehold it 40x60 b0f fff amp text B  gt   lt  label gt  x000D   x000D   x000D   Don t forget to add a class to your labels and in CSS use that class instead   Custom styles and animations Here s an advanced version using the  lt i gt  element and the  after pseudo    x000D   x000D  body color  444 font 100  1 4 sans-serif        CUSTOM RADIO  amp  CHECKBOXES    http   stackoverflow com a 17541916 383904     rad   ckb    cursor  pointer    user-select  none    -webkit-user-select  none    -webkit-touch-callout  none     rad  gt  input   ckb  gt  input     HIDE ORG RADIO  amp  CHECKBOX      position  absolute    opacity  0    width  0    height  0       RADIO  amp  CHECKBOX STYLES       DEFAULT  lt i gt  STYLE     rad  gt  i   ckb  gt  i     display  inline-block    vertical-align  middle    width   16px    height  16px    border-radius  50     transition  0 2s    box-shadow  inset 0 0 0 8px  fff    border  1px solid gray    background  gray       CHECKBOX OVERWRITE STYLES     ckb  gt  i     width  25px    border-radius  3px     rad hover  gt  i     HOVER  lt i gt  STYLE      box-shadow  inset 0 0 0 3px  fff    background  gray     rad  gt  input checked   i      RADIO CHECKED   lt i gt  STYLE      box-shadow  inset 0 0 0 3px  fff    background  orange       CHECKBOX     ckb  gt  input   i after    content        display  block    height  12px    width   12px    margin  2px    border-radius  inherit    transition  inherit    background  gray     ckb  gt  input checked   i after      RADIO CHECKED   lt i gt  STYLE      margin-left  11px    background   orange    x000D   lt label class  rad  gt     lt input type  radio  name  rad1  value  a  gt     lt i gt  lt  i gt  Radio 1  lt  label gt   lt label class  rad  gt     lt input type  radio  name  rad1  value  b  checked gt     lt i gt  lt  i gt  Radio 2  lt  label gt    lt br gt    lt label class  ckb  gt     lt input type  checkbox  name  ckb1  value  a  checked gt     lt i gt  lt  i gt  Checkbox 1  lt  label gt   lt label class  ckb  gt     lt input type  checkbox  name  ckb2  value  b  gt     lt i gt  lt  i gt  Checkbox 2  lt  label gt  x000D   x000D   x000D

User · Answer

spinTime  3  html  body   height  100         user-select  none    body       display  flex      flex-direction  column      align-items  center      justify-content  center      font-family   Raleway   sans-serif      font-size  72px      input           display  none            div  gt  span               display  inline-block              position  relative              white-space  nowrap              color  rgba  fff  0               transition  all 0 5s ease-in-out              span                   display  inline-block                  position  absolute                  left  50                   text-align  center                  color  rgba  000  1                   transform  translateX -50                    transform-origin  left                  transition  all 0 5s ease-in-out                   amp  first-of-type                       transform  rotateY 0deg  translateX -50                                       amp  last-of-type                       transform  rotateY 0deg  translateX 0   scaleX 0 75  skew 23deg 0deg                                                      amp  fat checked   div  gt  span span                amp  first-of-type                   transform  rotateY 0deg  translateX -50                               amp  last-of-type                   transform  rotateY 0deg  translateX 0   scaleX 0 75  skew 23deg 0deg                                    amp  fit checked   div  gt  span               margin  0 -10px              span                    amp  first-of-type                       transform  rotateY 90deg  translateX -50                                       amp  last-of-type                       transform  rotateY 0deg  translateX -50   scaleX 1  skew 0deg 0deg                                                       div   div               width  280px              margin-top  10px              label                   display  block                  padding  20px 10px                  text-align  center                  transition  all 0 15s ease-in-out                  background   fff                  border-radius  10px                  box-sizing  border-box                  width  48                   font-size  64px                  cursor  pointer                   amp  first-child                       float  left                      box-shadow                          inset 0 0 0 4px  1597ff                          0 15px 15px -10px rgba darken  1597ff  10    0 375                                      amp  last-child   float  right                                     amp  fat checked   div   div label                amp  first-child                   box-shadow                      inset 0 0 0 4px  1597ff                      0 15px 15px -10px rgba darken  1597ff  10    0 375                              amp  last-child                   box-shadow                      inset 0 0 0 0px  1597ff                      0 10px 15px -20px rgba  1597ff  0                                    amp  fit checked   div   div label                amp  first-child                   box-shadow                      inset 0 0 0 0px  1597ff                      0 10px 15px -20px rgba  1597ff  0                              amp  last-child                   box-shadow                      inset 0 0 0 4px  1597ff                      0 15px 15px -10px rgba darken  1597ff  10    0 375                                      lt input type  quot radio quot  id  quot fat quot  name  quot fatfit quot  gt   lt input type  quot radio quot  id  quot fit quot  name  quot fatfit quot  gt   lt div gt      GET F lt span gt A lt span gt A lt  span gt  lt span gt I lt  span gt  lt  span gt T  lt  div gt   lt div gt       lt label for  quot fat quot  gt  lt  label gt       lt label for  quot fit quot  gt  lt  label gt   lt  div gt

User · Answer

You can use CSS for that  HTML  only for demo  it is customizable   lt div class  quot button quot  gt       lt input type  quot radio quot  name  quot a quot  value  quot a quot  id  quot a quot    gt       lt label for  quot a quot  gt a lt  label gt   lt  div gt   lt div class  quot button quot  gt       lt input type  quot radio quot  name  quot a quot  value  quot b quot  id  quot b quot    gt       lt label for  quot b quot  gt b lt  label gt   lt  div gt   lt div class  quot button quot  gt       lt input type  quot radio quot  name  quot a quot  value  quot c quot  id  quot c quot    gt       lt label for  quot c quot  gt c lt  label gt   lt  div gt       CSS input type  quot radio quot         display  none    input type  quot radio quot   checked   label       border  1px solid red     jsFiddle

User · Answer

Here is very simple example    x000D   x000D  input type  radio    x000D     display none  x000D    x000D   x000D  input type  radio     label x000D    x000D      background-image url http   www clker com cliparts c q l t l B radiobutton-unchecked-sm-md png   x000D      background-size  100px 100px  x000D      height  100px  x000D      width  100px  x000D      display inline-block  x000D      padding  0 0 0 0px  x000D      cursor pointer  x000D    x000D   x000D  input type  radio   checked   label x000D    x000D      background-image url http   www clker com cliparts M 2 V 6 F u radiobutton-checked-sm-md png   x000D    x000D   lt div gt  x000D     lt input type  radio  id  shipadd1  value 1 name  address    gt  x000D     lt label for  shipadd1  gt  lt  label gt  x000D    value 1 x000D   lt  div gt  x000D   x000D   lt div gt  x000D     lt input type  radio  id  shipadd2  value 2 name  address    gt  x000D     lt label for  shipadd2  gt  lt  label gt  x000D    value 2 x000D   lt  div gt  x000D   x000D   x000D    Demo  http   jsfiddle net La8wQ 2471   This example based on this trick  https   css-tricks com the-checkbox-hack   I tested it on  chrome  firefox  safari

User · Answer

Images can be placed in place of radio buttons by using label and span elements.

   <div class="customize-radio">
        <label>Favourite Smiley</label><br>
        <label for="hahaha">
        <input type="radio" name="smiley" id="hahaha">
        <span class="haha-img"></span>
        HAHAHA
        </label>
        <label for="kiss">
        <input type="radio" name="smiley" id="kiss">
        <span class="kiss-img"></span>
        Kiss
        </label>
        <label for="tongueOut">
        <input type="radio" name="smiley" id="tongueOut">
        <span class="tongueout-img"></span>
        TongueOut
        </label>
    </div>

Radio button should be hidden,

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

Image can be given in the span tag,

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('hahabefore.png');
}

.kiss-img{
    background-image: url('kissbefore.png');
}
.tongueout-img{
    background-image: url('tongueoutbefore.png');
}

To change the image on click of radio button, add checked state to the input tag,

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('tongueout.png');
}

If you have any queries, Refer to the following link, As I have taken solution from the below blog, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

User · Answer

Example      Heads up  This solution is CSS-only      I recommend you take advantage of CSS3 to do that  by hidding the by-default input radio button with CSS3 rules    options input      margin 0 padding 0      -webkit-appearance none         -moz-appearance none              appearance none      I just make an example a few days ago    JSFiddle How to use images for radio-buttons - Gist

User · Answer

Keep radio buttons hidden  and on clicking of images  select them using JavaScript and style your image so that it look like selected  Here is the markup -    lt div id  radio-button-wrapper  gt       lt span class  image-radio  gt           lt input name  any-name  style  display none  type  radio   gt           lt img src       gt       lt  span gt       lt span class  image-radio  gt           lt input name  any-name  style  display none  type  radio   gt           lt img src       gt       lt  span gt   lt  div gt    and JS       image-radio img   click function           this  prev   attr  checked  true         CSS  span image-radio input type  radio   checked   img      border 1px solid red

User · Answer

Just using a class to only hide some   based on https   stackoverflow com a 17541916 1815624   x000D   x000D     HIDE RADIO    x000D   hiddenradio  type radio     x000D    position  absolute  x000D    opacity  0  x000D    width  0  x000D    height  0  x000D    x000D   x000D     IMAGE STYLES    x000D   hiddenradio  type radio    img   x000D    cursor  pointer  x000D    x000D   x000D     CHECKED STYLES    x000D   hiddenradio  type radio  checked   img   x000D    outline  2px solid  f00  x000D    x000D   lt div class  hiddenradio  gt  x000D   lt label gt  x000D     lt input type  radio  name  test  value  small  checked gt  x000D     lt img src  http   placehold it 40x60 0bf fff amp text A  gt  x000D   lt  label gt  x000D   x000D   lt label gt  x000D     lt input type  radio  name  test  value  big  gt  x000D     lt img src  http   placehold it 40x60 b0f fff amp text B  gt  x000D   lt  label gt  x000D   lt  div gt  x000D   x000D   lt div class    gt  x000D   lt label gt  x000D     lt input type  radio  name  test  value  small  checked gt  x000D     lt img src  http   placehold it 40x60 0bf fff amp text A  gt  x000D   lt  label gt  x000D   x000D   lt label gt  x000D     lt input type  radio  name  test  value  big  gt  x000D     lt img src  http   placehold it 40x60 b0f fff amp text B  gt  x000D   lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here is a simple jQuery UI solution based on the example here:

http://jqueryui.com/button/#radio

Modified code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label>
    <input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label>
  </div>
</form>

</body>
</html>

jQueryUI takes care of the image background so you know which button is checked.

Beware: If you want to set a button to checked or unchecked via Javascript, you must call the refresh function:

        $('#radio3').prop('checked', true).button("refresh");

[html] Use images instead of radio buttons

The answer is

Custom styles and animations

Example:

Examples related to html

Examples related to css

Tags