html圆点单选,css实现漂亮的checkbox多选框和radio单选按钮

html控件默认样式都不好看,需要css来美化,本文介绍的checkbox多选框和radio单选按钮也不例外,美化工作需要css+图片来完成。

html圆点单选,css实现漂亮的checkbox多选框和radio单选按钮_第1张图片

漂亮的checkbox多选框和radio单选按钮

实际使用中,除了用css和图片来美化样式效果之外,Javascript或JQuery脚本也是少不了的,不然提交表单时传值就有问题。

下面几张是本实例中要用到的图片

html圆点单选,css实现漂亮的checkbox多选框和radio单选按钮_第2张图片

checkbox多选框和radio单选按钮的图片

演示

本实例分别提供了JQuery版本和JavaScript版本,JQuery版本代码稍微少点,但需要引用JQuery库文件。

JQuery版本

JavaScript版本

结构

每一个 radio 按钮 和 checkbox input 元素应该被 标签包住,参阅示例:

Sample Label

Sample Label

介绍

我们想要将原始输入移除远离(远离左侧),并替换为每个标签放置背景图像。 新的图形单选按钮和复选框仍然可以切换,而单击/空格按下相应的

你可能感兴趣的:(html圆点单选)