Custom Checkbox styling in Contact Form 7

Contact Form 7 now outputs the label element right after the checkbox input, its the .wpcf7-list-item-label class, helpfully it’s already got a :before and :after pseudo-element ready to roll as well. Tapping into all that with a bit of scss we can turn the checkbox input into a circular black and white radio button. Nice.

.chkboks {
	input {
		position: relative;
		visibility: hidden;
		margin: 0 5px 0 0;
		font-size: 16px;
	}
	span.wpcf7-list-item { 
		width: 46%; 
		width: calc(50% - 3px);
		margin: 0;
		position: relative;
	}
	span.wpcf7-list-item-label {
		cursor: pointer;
		vertical-align: top;
	}
	span.wpcf7-list-item-label:before {
		content:"";
		display: block;
		position: absolute;
		border-radius: 50%;
		width: 14px;
		height: 14px;
		left: 0;
		top: 0;
		background:#000000;
	}
	span.wpcf7-list-item-label:after {
		position: absolute;
		content:"";
		background: #000000;
		border-radius: 50%;
		width: 6px;
		height: 6px;
		left: 4px;
		top: 4px;
		transition: all 0.4s ease-out; 
	}
	input:checked + span.wpcf7-list-item-label:after {
		background: #DBDBDB;
	}
}

Leave a Reply

Your email address will not be published. Required fields are marked *