I want to add images instead of checkbox but the functionality would be the same as the checkbox.
I have tried many options but not found any of the solutions.
Asked
Active
Viewed 4,089 times
1
-
your images is static or dinamic? – Ernest May 03 '19 at 16:57
-
static images.. – Manavjot Singh May 03 '19 at 16:59
-
2Maybe this is what you are looking for! https://stackoverflow.com/questions/30663562/use-images-like-checkboxes – Javari May 03 '19 at 17:00
-
just check this link out https://www.bigdataguys.com/contactus/ ... Check the contact form's image section. I want something similar to that. – Manavjot Singh May 03 '19 at 17:04
-
1Possible duplicate of [Use images like checkboxes](https://stackoverflow.com/questions/30663562/use-images-like-checkboxes) – Nick May 03 '19 at 17:44
1 Answers
1
You'll need to hide your input checkbox element and style custom pseudo-elements.
This is probably the best StackOverflow answer: How to style a checkbox using CSS?
It all starts with:
input[type=checkbox] { appearance: none; }
And you can style from there. Another StackOverflow answer: Pure CSS Checkbox Image replacement
Make sure you use the CF7 classes.
joe
- 53
- 6
-
This may be helpful but this code https://stackoverflow.com/questions/30663562/use-images-like-checkboxes is working in codepen but not on website – Manavjot Singh May 03 '19 at 17:43
-
Check your class names from Contact From 7. That might be affecting the styling. Can you edit your question to provide the code you're currently using? – joe May 03 '19 at 17:53
-