浏览器解析的html元素大多都有默认样式,所谓默认样式自然是大众化简洁化的,美观总是达不到要求。所以我们才会用CSS来改变他们的样式,使之美观。然而有一些元素是无法用CSS来定义样式的,比如表单中的复选框、单选框、下拉列表等,一般情况下是不拘这些小节的,默认的东西看多了也成了大家能接受的定律;但作为前端人员,总会遇到追求完美效果的网站,还好办法总是有的,这就需要借助JS来定义样式了。

先来看一个自定义复选框的效果:

如果我们是要在一个小框做成两个图片:一个是选中状态,一个是未选中状态。那么我们可以在页面里添加下面一段JS,并修改相应的四处图片路径和名称。

这样看来似乎有些繁琐,但其实只需要改四个地方。有了这段JS,以后解决复选框样式就能得心应手了。