修改checkbox样式

来源：互联网发布：爱淘宝怎么卸载编辑：程序博客网时间：2024/05/17 22:27

效果如下：

点击之后：

代码如下：

<span style="font-size:14px;"><!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>testCheck</title>    <style type="text/css">        input[type=checkbox] {            position: relative;            width: 10px;            height: 1px;        }        input[type=checkbox]::before{            content:'';            position: absolute;            top: 0;            left: 0;            width: 22px;            height: 22px;            line-height:22px;            text-align: center;            color:white;            font-size:16px;            background-color:#999;            border-radius: 4px;        }        input[type=checkbox]:checked::before {            color:white;            background-color:red;            content: '中';        }    </style></head><body><input type="checkbox"/></body></html></span>

稍微解释一下：

其实checkbox的样式还是浏览器的原始样式，只是它的大小和位置改了一下，然后在它的上面（::before）重画了一个假象。

-------------------------------------------------------------------- 以下为 2017/1/17 更新 --------------------------------------------------------------------

预备素材：

两张图片，分别为正常状态和选中状态的样式。

效果如下：

点击之后：

代码如下：

<html>  <head>      <meta charset="UTF-8">      <title>testCheck</title>      <style type="text/css">      input[type=checkbox] {          position: relative;     }      input[type=checkbox]::before{          content:'';          position: absolute;          width: 18px;          height: 18px;          background: url("check.png") no-repeat;      }      input[type=checkbox]:checked::before {          background: url("checked.png") no-repeat;        content: '';      }      </style>  </head>  <body>      <input id="test" type="checkbox"/></body></html>

测试是否可用：

可以通过 document.getElementById('test').checked 来判断该复选框是否被选中

0 0