Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: Clickable Image as Answer - change label

Clickable Image as Answer - change label 1 month 1 day ago #144150

  • RitaShen
  • RitaShen's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 17
  • Karma: 0
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
The administrator has disabled public write access.

Clickable Image as Answer - change label 1 month 6 hours ago #144176

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6571
  • Thank you received: 1477
  • Karma: 579
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 administrator has disabled public write access.

Clickable Image as Answer - change label 1 month 3 hours ago #144192

  • RitaShen
  • RitaShen's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 17
  • Karma: 0
I'm use 2.50+ Build 160430
Attachments:
The administrator has disabled public write access.

Clickable Image as Answer - change label 1 month 2 hours ago #144196

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6571
  • Thank you received: 1477
  • Karma: 579
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.
The administrator has disabled public write access.
The following user(s) said Thank You: RitaShen

Clickable Image as Answer - change label 1 month 1 hour ago #144205

  • RitaShen
  • RitaShen's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 17
  • Karma: 0
it's work
thanks for help!!!!!
The administrator has disabled public write access.
Time to create page: 0.228 seconds
Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form