原理：label标签的for属性可以将文字与复选框进行关联，点击文字可以同时将复选框选中。 隐藏checkbox标签，利用label标签的before伪元素来实现自定义样式。设置before伪元素的边框border属性实现复选框的外框，before伪元素的content值可为unicode字符集，这样就可以设置checkbox中选中状态，可以实现勾选效果、五角星效果、多边形效果等等。

代码：

<html>

    <head>

        <style>

            * { font-size: 12px; }

            input[type=checkbox].chk1 { display: none; }

            input[type=checkbox].chk1 + label::before { content: ""; display: inline-block; width: 10px; height: 10px; line-height: 10px; border: 1px solid #000; vertical-align: text-bottom; }

            input[type=checkbox].chk1:checked + label::before { content: "\2713"; width: 10px; height: 10px; line-height: 10px; }            

            input[type=checkbox].chk2 { display: none; }

            input[type=checkbox].chk2 + label::before { content: ""; display: inline-block; width: 10px; height: 10px; line-height: 10px; border: 1px solid #000; margin-right: 3px; vertical-align: text-bottom; }

            input[type=checkbox].chk2:checked + label::before { content: "\2713"; width: 10px; height: 10px; line-height: 10px; text-indent: 1px; }        

            input[type=checkbox].chk3 { display: none; }

            input[type=checkbox].chk3 + label::before { content: ""; display: inline-block; width: 10px; height: 10px; line-height: 10px; border: 1px solid #000; margin-right: 3px; vertical-align: text-bottom; }

            input[type=checkbox].chk3:checked + label::before { content: "\25c6"; width: 10px; height: 10px; line-height: 10px; }

        </style>

    </head>

    <body>

        <div>

            <input type="checkbox" id="chk1" class="chk1" />

            <label for="chk1"></label>

        </div>

        <br />

        <br />

        <div>

            <input type="checkbox" id="chk2" class="chk2" />

            <label for="chk2">选中</label>

        </div>

        <br />

        <br />

        <div>

            <input type="checkbox" id="chk3" class="chk3" />

            <label for="chk3">选中</label>

        </div>

    </body>

</html>

 

效果图：

利用伪元素before实现自定义checkbox样式的更多相关文章

  1. 利用伪类写一个自定义checkbox和radio

    首先是效果图来一张 再来一张html结构 关键的CSS来了~ 首先呢要把input标签设置为display: none;  因为自定义的原理是通过label的for属性,来点击label转向为点击in ...

  2. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  3. 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...

  4. 【CSS】自定义checkbox样式

    修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...

  5. 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...

  6. WPF 自定义CheckBox样式

    自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...

  7. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  8. 自定义checkbox样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Android之自定义checkbox样式

    大部分情况下,我们在UI中并不采用Android自带的checkbox复选框样式,这时候就需要我们自定义自己的checkbox. 首先找两张checkbox背景图片,比如下图样子的: 然后在drawa ...

随机推荐

  1. 【Codeforces Round #432 (Div. 1) B】Arpa and a list of numbers

    [链接]h在这里写链接 [题意] 定义bad list是一个非空的.最大公约数为1的序列.给定一个序列,有两种操作:花费x将一个元素删除.花费y将一个元素加1,问你将这个序列变为good list所需 ...

  2. 【Codeforces Round #433 (Div. 1) C】Boredom(二维线段树)

    [链接]我是链接 [题意] 接上一篇文章 [题解] 接(点我进入)上一篇文章. 这里讲一种用类似二维线段树的方法求矩形区域内点的个数的方法. 我们可以把n个正方形用n棵线段树来维护. 第i棵线段树维护 ...

  3. Mosquito的优化——订阅树优化（八）

    本文由逍遥子撰写.转发请标注原址: http://blog.csdn.net/houjixin/article/details/46413783 或 http://houjixin.blog.163. ...

  4. Nginx 设置，设置已经解析的域名，在nginx中没有定义相应server时的默认访问

    https://blog.csdn.net/m_nanle_xiaobudiu/article/details/80785027

  5. TOP全异步模式

    Top全异步方式调用技术方案 背景:目前top通过servlet3.0技术结合异步管道化框架做到半异步调用,半异步调用采用异步线程同步调用后端的方式来做api call @飞不起的奥特曼 的部分文档) ...

  6. swift项目第八天：自定义转场动画以及设置titleView的状态

    如图效果: 一:Home控制器 /* 总结:1:设置登陆状态下的导航栏的左右按钮:1:在viewDidLoad里用三目运算根据从父类继承的islogin的登陆标识来判断用户是否登陆来显示不同的界面.未 ...

  7. 搭建hadoop2.6.0集群环境 分类： A1_HADOOP 2015-04-20 07:21 459人阅读 评论(0) 收藏

    一.规划 (一)硬件资源 10.171.29.191 master 10.171.94.155  slave1 10.251.0.197 slave3 (二)基本资料 用户:  jediael 目录: ...

  8. POJ 1745 Divisibility DP

    POJ:http://poj.org/problem?id=1745 A完这题去买福鼎肉片,和舍友去买滴~舍友感慨"这一天可以卖好几百份,每份就算赚一块钱..那么一个月..一年...&quo ...

  9. poj 2063 Investment ( zoj 2224 Investment ) 完全背包

    传送门: POJ:http://poj.org/problem?id=2063 ZOJ:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problem ...

  10. Linux下搭建Memcached缓存系统

    首先说下抱歉,博主近期单位经常加班.博客更新有点慢.希望大家理解,草稿箱里存了不少内容,等不忙时候一点点填坑~ 在一般的站点开发学习时候.都会把数据存放在RDBMS(关系型数据库系统(Relation ...