- Posts: 153
- Thank you received: 5
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Style Images in Radio List Answers
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
9 years 7 months ago - 9 years 7 months ago #111370
by dweisser
Style Images in Radio List Answers was created by dweisser
Hi all,
I have a list radio question where the answers are images.
A1 - <img class="selectedImage" src="../surveyassets/images/imagen1.png"/> One
A2 - <img class="selectedImage" src="../surveyassets/images/imagen1.png"/> One
A3 - <img class="selectedImage" src="../surveyassets/images/imagen1.png"/> One
I want to:
Style the selected answer (apply a border).
Style the unselected answers (reduce opacity/grey out).
Hide the radio buttons.
Though this seems straightforward, I'm having trouble with each! It seems like you should be able to select the image like this:
input.checkbox:hover + label > img.selectedImage {
border: 10px solid red;
}
But, the result of this is that only the Label text gets the border. Why not the image? Any help or suggestions as always are much appreciated. Thank you.
Nebraska David
I have a list radio question where the answers are images.
A1 - <img class="selectedImage" src="../surveyassets/images/imagen1.png"/> One
A2 - <img class="selectedImage" src="../surveyassets/images/imagen1.png"/> One
A3 - <img class="selectedImage" src="../surveyassets/images/imagen1.png"/> One
I want to:
Style the selected answer (apply a border).
Style the unselected answers (reduce opacity/grey out).
Hide the radio buttons.
Though this seems straightforward, I'm having trouble with each! It seems like you should be able to select the image like this:
input.checkbox:hover + label > img.selectedImage {
border: 10px solid red;
}
But, the result of this is that only the Label text gets the border. Why not the image? Any help or suggestions as always are much appreciated. Thank you.
Nebraska David
Last edit: 9 years 7 months ago by dweisser.
The topic has been locked.
- wilmslow3
- Offline
- New Member
Less
More
- Posts: 17
- Thank you received: 1
9 years 7 months ago #111377
by wilmslow3
Replied by wilmslow3 on topic Style Images in Radio List Answers
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 153
- Thank you received: 5
9 years 7 months ago #111381
by dweisser
Replied by dweisser on topic Style Images in Radio List Answers
Thank you. I have found this as well as some other complicated workarounds. I couldn't get this to work. I think this is overly complicated, no. It seems like a simple CSS problem.
I think perhaps its because I'm using the right selector for my image, so maybe its template dependent - but I've tried everything. Thanks for your post though!
I do have the imagetick javascript workaround implemented so maybe that is interfering with it, but I don't have any javascript errors...I'll keep plugging.
I think perhaps its because I'm using the right selector for my image, so maybe its template dependent - but I've tried everything. Thanks for your post though!
I do have the imagetick javascript workaround implemented so maybe that is interfering with it, but I don't have any javascript errors...I'll keep plugging.
The topic has been locked.
- DenisChenu
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13907
- Thank you received: 2546
9 years 7 months ago #111382
by DenisChenu
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
Replied by DenisChenu on topic Style Images in Radio List Answers
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.
- dweisser
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 153
- Thank you received: 5
9 years 7 months ago - 9 years 7 months ago #111387
by dweisser
Replied by dweisser on topic Style Images in Radio List Answers
Yeah - nothing:
Seems like this ought to work, but alas it does not.
EDIT: I found something. There is a .css rule in my template:
I thought if I placed new rules after this, they would override it - but when I remove this rule...I am able to at least partially apply new css. More experimenting to come.
Code:
input[type=checkbox]:checked + label img { border: 10px solid yellow; }
Seems like this ought to work, but alas it does not.
EDIT: I found something. There is a .css rule in my template:
Code:
fieldset, img { border:0; }
I thought if I placed new rules after this, they would override it - but when I remove this rule...I am able to at least partially apply new css. More experimenting to come.
Last edit: 9 years 7 months ago by dweisser.
The topic has been locked.