Loading...

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;
	}
}

Latest Posts

Portfolio

Contact

Fill in the form below to send us a message. Your details will not be used for promotional purposes or passed on to any third parties.

 

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close