A CSS library that converts normal checkboxes and radio buttons into checkable (toggleable) elements (like buttons and cards) for better UX.
You can use the .boxed-check-* classes to colorize BoxedCheck.
<div class="boxed-check-group boxed-check-default"> ... </div>
<div class="boxed-check-group boxed-check-secondary"> ... </div>
<div class="boxed-check-group boxed-check-primary"> ... </div>
<div class="boxed-check-group boxed-check-success"> ... </div>
<div class="boxed-check-group boxed-check-danger"> ... </div>
<div class="boxed-check-group boxed-check-warning"> ... </div>
<div class="boxed-check-group boxed-check-info"> ... </div>
<div class="boxed-check-group boxed-check-dark"> ... </div>
Replace the default modifier classes with the .boxed-check-outline-* ones to remove all background images and colors on any BoxedCheck.
<div class="boxed-check-group boxed-check-outline-default"> ... </div>
<div class="boxed-check-group boxed-check-outline-secondary"> ... </div>
<div class="boxed-check-group boxed-check-outline-primary"> ... </div>
<div class="boxed-check-group boxed-check-outline-success"> ... </div>
<div class="boxed-check-group boxed-check-outline-danger"> ... </div>
<div class="boxed-check-group boxed-check-outline-warning"> ... </div>
<div class="boxed-check-group boxed-check-outline-info"> ... </div>
<div class="boxed-check-group boxed-check-outline-dark"> ... </div>
Adding custom Layout into .boxed-check-label.
<div class="boxed-check-group boxed-check-success">
<label class="boxed-check">
<input class="boxed-check-input" type="radio" name="radio-overview-custom">
<div class="boxed-check-label" style="text-align:center;">
<h2>Breakfast</h2>
<span>Good Morning</span>
</div>
</label>
<label class="boxed-check">
<input class="boxed-check-input" type="radio" name="radio-overview-custom">
<div class="boxed-check-label" style="text-align:center;">
<h2>Lunch</h2>
<span>Good Afternoon</span>
</div>
</label>
<label class="boxed-check">
<input class="boxed-check-input" type="radio" name="radio-overview-custom">
<div class="boxed-check-label" style="text-align:center;">
<h2>Supper</h2>
<span>Good Evening</span>
</div>
</label>
</div>
GitHub | Issue |
---|---|
![]() |
|
[email protected] | |
450183439 |
Your donation is a great encouragement and support to the project. We will continue to develop and maintain.