Created
June 5, 2020 01:00
-
-
Save usainicola/714e1e110e8a83a1bfce05094532ed3c to your computer and use it in GitHub Desktop.
Checkbox boilerplate - input
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
if (!defined('ABSPATH')) exit; | |
function checkbox($data=array()) { | |
$instance = '_'.uniqid(); | |
$text = $data['text'] ?? ''; | |
$checked = $data['checked'] ?? ''; | |
$name = $data['name'] ?? ''; | |
$class = $data['class'] ?? ''; | |
ob_start('ob_gzhandler'); | |
?> | |
<style> | |
/* The container */ | |
label.<?php echo $instance; ?> { | |
display: inline-block; | |
vertical-align: middle; | |
position: relative; | |
padding-left: 31.3px; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
/* Hide the browser's default checkbox */ | |
label.<?php echo $instance; ?> input { | |
display: none; | |
} | |
/* Create a custom checkbox */ | |
.checkmark { | |
position: relative; | |
display: inline-block; | |
vertical-align: middle; | |
height: 25px; | |
width: 25px; | |
background-color: #eee; | |
} | |
/* On mouse-over, add a grey background color */ | |
label.<?php echo $instance; ?>:hover input ~ .checkmark { | |
background-color: #ccc; | |
} | |
/* When the checkbox is checked, add a blue background */ | |
label.<?php echo $instance; ?> input:checked ~ .checkmark { | |
background-color: currentColor; | |
} | |
/* Create the checkmark/indicator (hidden when not checked) */ | |
.checkmark:after { | |
content: ""; | |
position: absolute; | |
display: none; | |
} | |
/* Show the checkmark when checked */ | |
label.<?php echo $instance; ?> input:checked ~ .checkmark:after { | |
display: block; | |
} | |
/* Style the checkmark/indicator */ | |
label.<?php echo $instance; ?> .checkmark:after { | |
left: 10.2px; | |
top: 5.2px; | |
width: 5.2px; | |
height: 10.2px; | |
border: solid white; | |
border-width: 0 3px 3px 0; | |
-webkit-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
</style> | |
<label class="<?php echo esc_attr($class); ?> <?php echo $instance; ?>"> | |
<input type="checkbox" <?php echo esc_attr($checked); ?> name="<?php echo esc_attr($name); ?>"> | |
<span class="checkmark"></span> | |
<span><?php echo esc_attr($text); ?></span> | |
</label> | |
<?php | |
$out = ob_get_contents(); | |
ob_end_clean(); | |
return $out; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment