Emoticon Radio Button

More
1 month 3 weeks ago - 1 month 3 weeks ago #159006 by shandye2
shandye2 created the topic: Emoticon Radio Button
Hi Everyone,

I need a little help regarding radio button with picture.
In my attachment, you can see 5 emoticons. But I want to get rid of the radio button beside the images.

I follow this script: jsfiddle.net/La8wQ/313/

Here's my javascript:
$("#javatbd" + radio.attr("name") + "").addClass("personnel");
         $("label[for='" + id + "']").addClass("drinkcard-cc");
         $("label[for='" + id + "']").css("background-image","url(http://localhost/limesurvey/upload/images/emoticons/"+ radio.attr("value") + ".png)");
         $("#label-" + id + "").insertBefore("#" + id + "").addClass("PersonnelNameXS");


And here's my css:
.personnel input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
 
.personnel input:active +.drinkcard-cc{opacity: .9;}
.personnel input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1) grayscale(0) opacity(.7);
       -moz-filter: brightness(1) grayscale(0) opacity(.7);
            filter: brightness(1) grayscale(0) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1) grayscale(0) opacity(.9);
       -moz-filter: brightness(1) grayscale(0) opacity(.9);
            filter: brightness(1) grayscale(0) opacity(.9);
}
 
.PersonnelNameXS
{
    margin-top: 5px;
}

Attachments:
Last Edit: 1 month 3 weeks ago by shandye2.

Please Log in to join the conversation.

More
1 month 3 weeks ago #159009 by Joffm
Joffm replied the topic: Emoticon Radio Button

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!