Welcome to the LimeSurvey Community Forum

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

question image select

  • lidiaencide
  • lidiaencide's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 years 1 month ago #212099 by lidiaencide
question image select was created by lidiaencide
Any suggestions on how to remove the gray border from the image?

Ex:
https://forums.limesurvey.org/forum/attachment/14157
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
3 years 1 month ago #212111 by Joffm
Replied by Joffm on topic question image select
Hi,
general:
It's always the best to use a webdevelopment tool that is included in each modern browser to see which classes are affected
Here you see that the default border is 18px and of a grayish color
Hi,
Theory:
It's always the best to use a webdevelopment tool that is included in each modern browser to see which classes are affected
Here you see that the default border is 18px and of a grayish color


In the webdevelopment tool you can change values to see the effects.
I changed to 5px


Now you know how you can style the border.
But don't forget: Do not remove the border. The border indicates which image is selected.

Therefore you may set the border width to 5px and the color to transparent in "not selected" state, but to "whatevercolor you like" in "selected" state.

Practice:
So you may add something like this to the custom.css of your extended theme.
Code:
li.imageselect-listitem .imageselect-container .imageselect-label {
    border: 5px solid transparent;
}
 
li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked+label {
    border: 5px solid #337AB7;
}

Here I used the same color as the "Next" button.
 

 

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose