Emoticon Radio Button

More
9 months 3 weeks ago - 9 months 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: 9 months 3 weeks ago by shandye2.

Please Log in or Create an account to join the conversation.

More
9 months 3 weeks ago #159009 by Joffm
Joffm replied the topic: Emoticon Radio Button


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!