随着前端技术的进步和发展,传统的表单样式已经不能满足需求,由于美观上的要求,网上现在出现了很多的这种表单美化插件。上网搜了一下,还真的不少,不过都没怎么用,我不喜欢在网页的头部加载一群js,有的网页头部这样的标签排列很长,很多的js一起加载进来,之间可能会出现bug不说,就是当初更改起来也不是很方便。
插件有插件的好处,有它的便捷性。如果为了效率,使用插件值得考虑。如果是为了研究学习,建议还是自己写比较好。下面写了一个简单的radio和checkbox的美化程序。
提示:可修改后代码再运行!
HTML代码:
Javascript部分代码:
CSS部分:
其实原理很简单,就是让input透明度变为0,然后给input添加一个背景,当鼠标选择的时候,更换其背景为选中状态即可
稍做了一下改动,可以控制样式是否加载:
提示:可修改后代码再运行!