Emoticon Radio Button

More
3 years 6 months ago - 3 years 6 months ago #159006 by shandye2
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: 3 years 6 months ago by shandye2.
The topic has been locked.
LimeSurvey Partners
More
3 years 6 months ago #159009 by Joffm
Replied by Joffm on topic Emoticon Radio Button


Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.

Start now!

Just create your account and start using Limesurvey today.

Register now