Pro Forms - card checkbox

How To
1

Hi all,

Apologies if this is a basic question. I have a card checkbox with an image and a heading. The functionality works when selected and gives the card a border but my client also wants to include a tick (checkbox style) that also shows selected when anywhere in the card checkbox is clicked.

My question is; is this possible natively or does it require custom css/code?

Thanks in advance!

1 Like
2

Hope you already found a solution.

Actually you have to handle it with custom css to unhide the checkbox, which already is there.

Instead of unhiding the default checkbox you can do some pseudo elements styling to toggle using hover/siblings selector.

Something like the following code should do the trick, but beware iā€™m using custom class names, since this is from a theme of mine.

.custom-card-checkboxes {
	--gbe-cb-marker--color: transparent;
	--gbe-cb-wrapper--color: #CCC;
	
	.options-wrapper {
		flex-wrap: nowrap;

		li.custom-card-cb {
			transition: all .3s;

			&:hover {
				opacity: 1;
				--custom-cb-wrapper--color: #FF0000;
			}



			label {
				position: relative;

				&:before {
					content: '';
					position: absolute;
					display: block;
					width: 19px;
					height: 19px;
					border: 1px solid var(--custom-cb-wrapper--color);
					top: 0em;
					right: 0em;
					background-color: white;
					z-index: 	10;
					box-sizing: border-box;
				}

				&:after {
					content: '';
					position: absolute;
					display: block;
					width: 15px;
					height: 15px;
					border: 3px solid transparent;
					top: 2px;
					right: 2px;
					background-color: var(--custom-cb-marker--color);
					z-index: 	11;
					box-sizing: border-box;
					transition: all .3s;
				}
			}


			input:checked ~ label {
				--custom-cb-marker--color: #FF0000;
			}
		}
	}
}
3

Thanks for this. Yep, I had to use a similar solution. I was asking mainly to see if there was a native option but sadly not! Thanks for your help!