web.UI 对 checkbox 等html控件的 美化，使之配合psd出任意效果。[原创]

虽然技术不是很难，单现在网上采用这种技术的，还是很少，也就是在国外的一些个站点看到过这些技术，所以自己就写下实现效果。。（第一次发首页，高手请勿见怪，但绝对原创）
你是否对web.UI默认设计感到很烦恼，很多好的设计，由于不能很好的支持导致了网页的整体美观？
哪么好吧。。让我们来重写web组建，让他们按照我们的显示效果来出现吧。。

技术需求：设计能力（可以去找美工），javascript基本概念，html熟悉

下面我就以html->form->checkbox为例，来为大家改写下。。

<input type="checkbox" name="cc" id="cc" value="checkbox" />

这个就是我们常用的checkbox了，对于它的样式，默认的css并不能很好的解决我们的问题，那么我们只有一个方法来完成我们想法了，那是什么呢？很简单，K掉他。。呵呵。。但可不是删除啊。。因为我们还要用他来提交表单等等。。所以只要style="display:none;" 就可以了。。对于他来说我们只需要他的 checked 属性。

现在你可以找你的美工做个你想要的图片了。。要两个哦。一个未选中和一个选中的哦。。（水分太弄了好像）

这里我们用div来弄个表现的层来替代刚才checkbox。。

<div style="width:22px; height:22px;background-image:url(checkOff.JPG);" onclick="myCheckbox('cc',this);"> </div>

我做的图片宽度是22*22 默认的时候给了张checkOff图片，这里我们用div.onclick事件来模拟checkbox的onclick

事件。。写了个小函数

<script language="javascript">
function myCheckbox(obj,thisobj)
{
    var o = document.getElementById(obj);
    if(o.checked)
    
{
        thisobj.style.backgroundImage="url(checkOff.JPG)";
        o.checked = false;
    }
    else
    
{
        thisobj.style.backgroundImage="url(checkOn.JPG)";
        o.checked = true;
    }
}
</script>

意思就是，点击的时候，显示我们的图片，并自动改写checkbox控件属性，达到实用目的。表单提交的时候，获得cc就可以了。。

下面给出小demo，大家下载下来看看就可以了。。根据这个思路，可以自己做些动画效果或什么的都可以，下来菜单用jQuery当然是更XX了。。呵呵。。

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 ​​https://www.VuejsDev.com​​ 用于梳理知识点