Welcome to the LimeSurvey Community Forum

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

Clickable Image as Answer - change label

RitaShen
Offline
Premium Member

More

8 years 9 months ago #144150 by RitaShen

Replied by RitaShen on topic Clickable Image as Answer - change label

thanks for sharing.

I have use this in Mutiple Options.
just change "radio" to "checkbox"

Code:

<style type="text/css">/* Add box around answer option */  
  input[type=checkbox] + label+div::before { font-family: FontAwesome; content: "\f06a";}
  input[type=checkbox]:checked +label+div::before { font-family: FontAwesome; content: "\f07a";}
 
input[type=checkbox] + label+div {
  color: #ccc;
  font-style: italic;
  padding: 10px;
  border: 1px solid #f1f1f1;
  margin-left: -20px !important;
} 
input[type=checkbox]:checked + label+div {
  color: #f00;
  font-style: normal;
  padding: 10px;  
  border: 1px solid green;
  margin-left: -20px !important;  
}
.checkbox label::before {
  visibility: hidden !important;
}
.checkbox label::after {
  visibility: hidden !important; 
}
</style>

I just curious about does anyone try to use this in the Array？
I have try, but it does not work!

many thanks

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

8 years 9 months ago #144176 by tpartner

Replied by tpartner on topic Clickable Image as Answer - change label

What LimeSurvey version and what type of array?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

RitaShen
Offline
Premium Member

More

8 years 9 months ago #144192 by RitaShen

Replied by RitaShen on topic Clickable Image as Answer - change label

I'm use 2.50+ Build 160430

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

8 years 9 months ago #144196 by tpartner

Replied by tpartner on topic Clickable Image as Answer - change label

Try adding something like this to the end of template.css:

Code:

.array-flexible-row .radio input[type="radio"] + label::before {
  top: -0.2em;
  left: 0.1em;
  height: auto;
  width: auto;
  font-family: FontAwesome; 
  font-size: 21px;
  content: "\f06a";   
  color: #CCCCCC;  
  background-color: transparent;
  border: 0 none;
}
 
.array-flexible-row .radio input[type="radio"]:checked + label::before { 
  content: "\f07a";
  color: green;
}
 
.array-flexible-row .radio input[type="radio"]:focus + label::before {
    outline: none;
}
 
.array-flexible-row .radio label::after {
  display: none !important;
}