Today we are going to share awesome lightweight CSS plugin to beautify the default checkboxes. The beautiful-checkbox.css library allows you to beautify and change styles, sizes, and positions of the native checkbox inputs with pure CSS.
Link beautiful-checkbox.css on your HTML page.
<link type="text/css" rel="stylesheet" href="beautiful-checkbox.css">
By using the below list of classes you can customize Checkboxes.
- large: large checkbox
- medium: medium checkbox
- small: small checkbox
- tiny: tiny checkbox
- rounded-3: rounded checkbox
- rounded-6: rounded checkbox
- rounded-8: rounded checkbox
- rounded-10: rounded checkbox
- rounded-16: rounded checkbox
- ch-align-right: right alignment
- disabled: disabled checkbox
<div class="checkbox medium m-b-2">
<div class="checkbox-overlay">
<input type="checkbox" checked="checked" />
<div class="checkbox-container">
<div class="checkbox-checkmark"></div>
</div>
<label>Label of a medium checkbox aligned right</label>
</div>
</div>
<!-- Large Checkbox -->
<div class="checkbox large m-b-2">
<div class="checkbox-overlay">
<input type="checkbox" />
<div class="checkbox-container">
<div class="checkbox-checkmark"></div>
</div>
<label>Label of a large checkbox</label>
</div>
</div>
<!-- Medium Checkbox -->
<div class="checkbox medium m-b-2">
<div class="checkbox-overlay">
<input type="checkbox" checked="checked" />
<div class="checkbox-container">
<div class="checkbox-checkmark"></div>
</div>
<label>Label of a medium checkbox aligned right</label>
</div>
</div>
<!-- Small Checkbox -->
<div class="checkbox small m-b-2">
<div class="checkbox-overlay">
<input type="checkbox" />
<div class="checkbox-container">
<div class="checkbox-checkmark"></div>
</div>
<label>Label of a small checkbox</label>
</div>
</div>
<!-- Tiny Checkbox -->
<div class="checkbox tiny m-b-2">
<div class="checkbox-overlay">
<input type="checkbox" checked="checked" />
<div class="checkbox-container">
<div class="checkbox-checkmark"></div>
</div>
<label>Label of a tiny checkbox aligned right</label>
</div>
</div>
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
Customizing native checkboxes with pure CSS is a simple way to improve the visual consistency of a web interface without relying on heavy JavaScript plugins. The beautiful-checkbox.css approach described here allows developers to change checkbox sizes, shapes, alignment, and disabled states while keeping the implementation relatively lightweight. The list of classes also makes it easy to understand the available customization options.
ReplyDeleteThe example demonstrates how a stylesheet can be linked directly to an HTML page and then combined with predefined classes such as large, medium, rounded-8, and ch-align-right. This is a useful practical example for beginners learning how HTML elements and CSS classes work together. A HTML CSS JavaScript Course can help learners build a stronger foundation in these core web development technologies.
I also like that the tutorial provides actual markup rather than only showing the visual result, because developers can understand how the checkbox structure and CSS classes work together. Experimenting with different sizes, rounded styles, and alignment options can be a good way to practice frontend styling. Structured HTML CSS JavaScript Training can further help learners develop the skills needed to create and customize interactive web interfaces.
ReplyDelete