Clickable Image as Answer - change label

More
1 year 1 week ago #144150 by RitaShen
RitaShen replied the topic: Clickable Image as Answer - change label
thanks for sharing.

I have use this in Mutiple Options.
just change "radio" to "checkbox"
<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

Please Log in to join the conversation.

More
1 year 1 week ago #144176 by tpartner
tpartner replied the 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.

Please Log in to join the conversation.

More
1 year 1 week ago #144192 by RitaShen
RitaShen replied the topic: Clickable Image as Answer - change label
I'm use 2.50+ Build 160430
Attachments:

Please Log in to join the conversation.

More
1 year 1 week ago #144196 by tpartner
tpartner replied the topic: Clickable Image as Answer - change label
Try adding something like this to the end of template.css:

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


Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: RitaShen

Please Log in to join the conversation.

More
1 year 1 week ago #144205 by RitaShen
RitaShen replied the topic: Clickable Image as Answer - change label
it's work
thanks for help!!!!!

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!