Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Emoticon Radio Button

shandye2
Topic Author
Offline
New Member

More

7 years 11 months ago - 7 years 11 months ago #159006 by shandye2

Emoticon Radio Button was created 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:

Code:

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

And here's my css:

Code:

.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;
}