最近，在工作中，我们需要实现收音机的定制风格，我们通常使用的默认样式是我们真的不知道如何解决它，所以我们开始搜索。最后，我们看到了一个解决我们遇到的问题的好办法。
2、原则
我们都知道，当写作结构、无线电或复选框也会跟着一起使用的标签，属性和输入ID值相同的情况下标签的值，点击标签选择输入，这是输入标签覆盖默认样式的使用，通过添加背景图像标签（美化复选框或单选），或点击的过程中，我们没有看到默认的输入（设置z-index：1输入），点击标签，通过各种事件，加载不同的背景图片（这里是改变位置的背景图片）
3，设置默认样式美化复选框或收音机
（1）页面结构
你喜欢什么类型的
行动/冒险
喜剧片
史诗/历史
科幻小说
浪漫
西方
高尔夫是所有时代最伟大的电影，对
完全地
你一定是在开玩笑。
Caddyshack是什么
（2）jQuery代码（必须向jQuery库引入前提条件）
jquery.fn.custominput =函数（）{
$（this）每个（函数（i）{）
如果（$（this））是（{类型=复选框}，{类型=广播}））{
var输入= $（this）；
使用输入的ID获取关联的标签
标签= $（var 'label { =+ input.attr（'id'）+}）；
/ /获得类型，为className的后缀
VaR的输入型=（input.is（{ }复选框类型=））'checkbox：收音机；
在一个div标签中包装输入
$（）。InsertBefore（输入），添加（输入、标签）；
使用共享名称属性查找该集合中的所有输入
无功allinputs = $（输入{名称=+ input.attr（'name'）+}）；
对于不支持标签上的悬停伪类的浏览器来说是必需的
label.hover（函数（）{（）
$（这）AddClass（'hover）；
如果（输入类型= = 'checkbox（输入。'检查'））{
$（这）AddClass（'checkedhover）；
}
}函数（）{（）
$（这）RemoveClass（'hover checkedhover）；
}）；
绑定自定义事件、触发它、绑定单击、焦点、模糊事件。
Input.bind（'updatestate，函数（）{（）{
如果（input.is（'检查'））{
如果（input.is（'：电台））{
allinputs.each（函数（）{（）
（$ 'label { =+ $（this）。Attr（'id'）+}）。RemoveClass（'checked）；
}）；
}；
Label.addClass（'checked）；
{人}
Label.removeClass（'checked checkedhover checkedfocus）；
}
}）
触发（'updatestate）。
单击（函数（）{（））
$（这）Trigger（'updatestate）；
}）
焦点（函数（）{（））
Label.addClass（'focus'）；
如果（输入类型= = 'checkbox（输入。'检查'））{
$（这）AddClass（'checkedfocus）；
}
}）
模糊（函数（）{（））
Label.removeClass（集中checkedfocus）；
}）；
}
}）；
}
当引入jQuery库并引入上面的代码时，可以执行以下代码
$（输入的）CustomInput（）；
（3）生成的外层div
如果您的代码结构是用成对的标签和输入编写的，那么将在它们的外层生成一个div，如
（4）设置自定义默认样式
准备一张图片，如下所示：
你可能会问，为什么有没有在上面的距离，但有一定的距离，因为我们的输入选项大多为中心，我们使用标签的背景图片来模拟，因此我们正在进行的输入选项为中心。总之，ICO小图标必须垂直排列，并有一定的距离必须达到左中显示。
包装div / * * /
自定义复选框，
{自定义无线电
职位：相对；
显示：内联块；
}
*输入，标签*定位
自定义复选框输入，
自定义无线电{输入
位置：绝对；
左：2px；
上图：3px；
保证金：0；
Z指数：1；
}
自定义复选框标签，
自定义无线电{标签
显示块；
职位：相对；
Z指数：1；
字体大小：1.3em；
填充右：1em；
线高度：1；
填充：5em 0.5em 30px；
保证金：00.3em；
光标：指针；
}
这是一些最外层的设置，当然您可以自己修改。
=默认状态效应
自定义复选框{标签
背景：URL（图片）不重复；
}
自定义无线电{标签
背景：URL（图像/按钮广播）不重复；
}
自定义复选框标签，
自定义无线电{标签
背景位置：0px 0px；
}
悬停和焦点
label.hover自定义复选框，
label.focus自定义复选框，
label.hover自定义电台，
{ label.focus自定义电台。
/ *背景位置：- 10px * 114px；
}
label.checked自定义复选框，
{ label.checked自定义电台。
背景位置：0px - 47px；
}
label.checkedhover自定义复选框，
{ label.checkedfocus自定义复选框。
/ *背景位置：- 10px * 314px；
}
label.focus自定义复选框，
{ label.focus自定义电台。
概述：1px点缀# CCC；
}
最后，一句话，我完美地解决了我的问题，顺便看一看。
以上是本文的全部内容，希望大家能喜欢。
