纯CSS美化checkbox复选框radio单选按钮，开关按钮外观样式

演示  website 下载

纯css实现的checkbox复选框radio单选按钮外观美化，CSS复选框按钮来创建可伸缩的CSS单选开关风格按钮。

使用方法：

1. 在html页面中加载主要样式文件。

<link href="toggle-checkbox-radio.min.css" rel="stylesheet" />

2.创建自定义复选框、单选按钮、开关。支持的主题：

• Primary

• Secondary

• Info

• Warning

• Danger

• Light

• Dark

<!-- Checkbox -->
<label><input type="checkbox" class="checkbox color-primary" checked /> Primary</label>

<label><input type="checkbox" class="checkbox color-secondary" checked /> Secondary</label>

<label><input type="checkbox" class="checkbox color-info" /> Info</label>

<label><input type="checkbox" class="checkbox color-warning" /> Warning</label>

<label><input type="checkbox" class="checkbox color-danger" checked /> Danger</label>

<label><input type="checkbox" class="checkbox color-light" checked /> Light</label>

<label><input type="checkbox" class="checkbox color-dark" /> Dark</label>

<label><input type="checkbox" class="checkbox color-primary" disabled checked /> Primary checked disabled</label>

<label><input type="checkbox" class="checkbox color-secondary" disabled /> Secondary disabled</label>

<!-- Radio Button -->
<label><input name="radio1" type="radio" class="radio color-primary" /> Primary</label>

<label><input name="radio1" type="radio" class="radio color-secondary" /> Secondary</label>

<label><input name="radio1" type="radio" class="radio color-info" /> Info</label>

<label><input name="radio1" type="radio" class="radio color-warning" /> Warning</label>

<label><input name="radio1" type="radio" class="radio color-danger" /> Danger</label>

<label><input name="radio1" type="radio" class="radio color-light" /> Light</label>

<label><input name="radio1" type="radio" class="radio color-dark" /> Dark</label>

<label><input name="radio1" type="radio" class="radio color-info" disabled checked /> Info checked disabled</label>

<label><input name="radio1" type="radio" class="radio color-secondary" disabled /> Secondary disabled</label>

<!-- Switches -->
<label><input type="checkbox" class="toggle color-primary" /> Primary</label>

<label><input type="checkbox" class="toggle color-secondary" /> Secondary</label>

<label><input type="checkbox" class="toggle color-info" checked /> Info</label>

<label><input type="checkbox" class="toggle color-warning" checked /> Warning</label>

<label><input name="radio2" type="radio" class="toggle color-danger" /> Danger</label>

<label><input name="radio2" type="radio" class="toggle color-light" /> Light</label>

<label><input name="radio2" type="radio" class="toggle color-dark" /> Dark</label>

<label><input name="radio2" type="radio" class="toggle color-warning" disabled checked /> Warning checked disabled</label>

<label><input name="radio2" type="radio" class="toggle color-secondary" disabled /> Secondary disabled</label>

3.应用轮廓样式

<input type="checkbox" class="checkbox color-primary is-outline" checked /> Primary

4.应用材质样式

<input type="checkbox" class="checkbox color-primary is-material" checked /> Primary</label>

5.使用以下CSS类确定大小。

• is-large: large

• is-small: small

<input type="checkbox" class="checkbox color-primary is-large" checked /> Primary</label>
<input type="checkbox" class="checkbox color-primary is-small" checked /> Primary</label>

6.启用动画。

<input type="checkbox" class="checkbox color-primary has-animation" checked /> Default nimation</label>