How do I style radio buttons with images - laughing smiley for good sad smiley for bad

Question

I would like to create an HTML form for user feedback  If the overall feedback is good  the user should click on a laughing smiley  if the overall feedback is bad  the user should choose a sad smiley   I think this should be done using radio buttons  with the smileys instead of the radio buttons  Maybe I m wrong though     Do you know how I can achieve this   Thanks

User · Answer

You can take advantage of CSS3 to do that, by hidding the by-default input radio button with CSS3 rules:

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

And then using labels for images as the following demos:

JSFiddle Demo 1

From top to bottom: Unfocused, MasterCard Selected, Visa Selected, Mastercard hovered

JSFiddle Demo 2

Visa selected

Gist - How to use images for radio-buttons

User · Answer

Let s keep them simple  shall we  First off  using pure HTML   CSS     lt div id  emotion  gt       lt input type  radio  name  emotion  id  sad    gt           lt label for  sad  gt  lt img src  sad image png  alt  I m sad    gt  lt  label gt        lt input type  radio  name  emotion  id  happy    gt           lt label for  happy  gt  lt img src  happy image png  alt  I m happy    gt  lt  label gt   lt  div gt    This will degrade nicely if there s no JavaScript  Use id and for attributes to link up the label and radiobutton so that when the image is selected  the corresponding radiobutton will be filled  This is important because we ll need to hide the actual radiobutton using JavaScript  Now for some jQuery goodness  First off  creating the CSS we ll need     input hidden       position  absolute      left  -9999px      selected       background-color   ccc      emotion label       display  inline-block      cursor  pointer      emotion label img       padding  3px      Now for the JavaScript        emotion input radio   addClass  input hidden        emotion label   click function          this  addClass  selected   siblings   removeClass  selected          The reason why we re not using display  none here is for accessibility reasons  See  http   www jsfiddle net yijiang Zgh24 1 for a live demo  with something more fancy

User · Answer

I have edited  one of the previous post  Now  it is way more simple and it works perfectly    lt input style  position  absolute left -9999px   type  radio  name  emotion  id  sad    gt   lt label for  sad  gt  lt img src  red gif  style  display  inline-block cursor  pointer padding  3px   alt  I m sad    gt  lt  label gt    lt input  style  position  absolute left -9999px   type  radio  name  emotion  id  happy    gt   lt label for  happy  gt  lt img src  blue gif  style  display  inline-block cursor  pointer padding  3px   alt  I m happy    gt  lt  label gt

User · Answer

You cannot style things like radio buttons  checkboxes  scrollsbars  etc   at all   These are native to the OS and the browser and not something you can manipulate   You can simulate this  however by hiding the radio buttons and only showing an image instead as in    lt input type  radio  style  display  none   id  sad    gt  lt label for  sad  gt  lt img class  sad image    gt  lt  label gt

User · Answer

Faced with the same problem I created a simple jQuery plugin http   xypaul github io radioimg js   It works using hidden radio buttons and labels containing images as shown below    lt input type  radio  style  display  none   id  a    gt   lt label for  a  gt      lt img class      gt   lt  label gt

User · Answer

Images can be placed in place of radio buttons by using label and span elements       lt div class  customize-radio  gt           lt label gt Favourite Smiley lt  label gt           lt br gt           lt label for  hahaha  gt             lt input type  radio  name  smiley  id  hahaha  gt             lt span class  haha-img  gt  lt  span gt            HAHAHA          lt  label gt           lt label for  kiss  gt             lt input type  radio  name  smiley  id  kiss  gt             lt span class  kiss-img  gt  lt  span gt            Kiss          lt  label gt           lt label for  tongueOut  gt             lt input type  radio  name  smiley  id  tongueOut  gt             lt span class  tongueout-img  gt  lt  span gt            TongueOut          lt  label gt       lt  div gt    Radio button should be hidden    customize-radio label  gt  input type    radio         visibility  hidden      position  absolute      Image can be given in the span tag    customize-radio label  gt  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  gt  input type    radio   checked   span haha-img       background-image  url  haha png       customize-radio label  gt  input type    radio   checked   span kiss-img      background-image  url  kiss png       customize-radio label  gt  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

With pure html  no JS   you can t really substitute a radio-button for an image  at least  I don t think you can   You could  though use the following to make the same connection to the user    lt form action    method  post  gt       lt fieldset gt          lt input type  radio  name  feeling  id  feelingSad  value  sad    gt  lt label for  feelingSad  gt  lt img src  path to sad png    gt  lt  label gt          lt label for  feelingHappy  gt  lt input type  radio  name  feeling  id  feelingHappy  value  happy    gt  lt img src  path to happy png    gt  lt  label gt       lt  fieldset gt   lt  form gt

User · Answer

Here s a pure HTML CSS solution   HTML    lt div class  image-radio  gt     lt input type  radio  value  true  checked  checked  name  ice cream  id  ice cream vanilla  gt     lt label for  ice cream vanilla  gt Vanilla lt  label gt     lt input type  radio  value  true  name  ice cream  id  ice cream chocolate  gt     lt label for  ice cream chocolate  gt Chocolate lt  label gt   lt  div gt    SCSS        use an image instead of the native radio widget  image-radio        input type radio        display  none        input type radio    label       background  asset-url  icons choice-unchecked svg   no-repeat left      padding-left  2rem        input type radio  checked   label       background  asset-url  icons choice-checked svg   no-repeat left

User · Answer

another alternative is to use a form replacement script library  They usually hide the original element and replace them with a div or span  which you can style in whatever way you like   Examples are   http   customformelements net  based on mootools  http   www htmldrive net items show 481 jQuery-UI-Radiobutton-und-Checkbox-Replacement html

User · Answer

Use jQuery  Keep your checkbox elements hidden and create a list like this    lt ul id  list  gt       lt li gt  lt a href  javascript void 0   id  link1  gt Happy face lt  a gt  lt  li gt       lt li gt  lt a href  javascript void 0   id  link2  gt Sad face lt  a gt  lt  li gt   lt  ul gt    lt form action  file php  method  post  gt       lt  -- More code -- gt       lt input type  radio  id  option1  name  radio1  value  happy  style  display none   gt       lt input type  radio  id  option2  name  radio1  value  sad  style  display none   gt       lt  -- More code -- gt   lt  form gt    lt script type  text javascript  gt      list li a   click function             list  active   removeClass  active        var id   this id      var newselect   id replace  link    option              newselect  attr  checked   true         this  addClass  active   parent   addClass  active        return false       lt  script gt    This code would add the checked attribute to your radio inputs in the background and assign class active to your list elements  Do not use inline styles of course  don t forget to include jQuery and everything should run out of the box after you customize it   Cheers

[html] How do I style radio buttons with images - laughing smiley for good, sad smiley for bad?

JSFiddle Demo 1

JSFiddle Demo 2

Gist - How to use images for radio-buttons

Examples related to html

Examples related to css

Examples related to forms