Skip to content

Instantly share code, notes, and snippets.

@awran5
Last active March 2, 2022 16:59
Show Gist options
  • Save awran5/31b9b30eb3e70932d7f93908f89df09f to your computer and use it in GitHub Desktop.
Save awran5/31b9b30eb3e70932d7f93908f89df09f to your computer and use it in GitHub Desktop.
Convert CMB2 radio-inline Field to Switch Field with pure CSS
  1. Copy this code to your project CSS file
/* Start Switch field */
.switch-field .cmb2-radio-list li {
	padding-right: 0 !important;
	margin: 0;
}

.switch-field .cmb2-radio-list input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field .cmb2-radio-list label {
	float: left;
}

.switch-field .cmb2-radio-list label {
	margin: 0 -.25rem;
	background-color: #e4e4e4;
	padding: .25rem .75rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-transition: all 0.1s ease-in-out;
	transition:         all 0.1s ease-in-out;
}

.switch-field .cmb2-radio-list input:checked + label {
	color: #fff;
	background-color: #0073aa;
}

.switch-field .cmb2-radio-list li:first-of-type label{
	border-radius: .25rem 0 0 .25rem;
}
.switch-field .cmb2-radio-list li:last-of-type label{
	border-radius: 0 .25rem .25rem 0;
}
/* End Switch field */
  1. Add radio_inline field with custom class parameter named switch-field like expamle:
$cmb->add_field( array(
	'name'    => 'Test Radio inline',
	'id'      => 'wiki_test_radio_inline',
	'type'    => 'radio_inline',
	'options' => array(
		'standard' => __( 'Option One', 'cmb2' ),
		'custom'   => __( 'Option Two', 'cmb2' ),
	),
	'default' => 'standard',
	'classes' => 'switch-field',
) );
  1. Enjoy :)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment