<!doctype html>

<html>
 
    <head>
        <meta charset="utf-8">
        <title>chec</title>
 
        <style>
            #container {
                margin: 20px auto;
            }
             
            #container span {
                position: relative;
            }
             
            #container .input_check {
                position: absolute;
                visibility: hidden;
            }
             
            #container .input_check+label {
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 1px solid #fd8845;
            }
             
            #container .input_check:checked+label:after {
                content: "";
                position: absolute;
                left: 2px;
                bottom: 12px;
                width: 9px;
                height: 4px;
                border: 2px solid #fd8845;
                border-top-color: transparent;
                border-right-color: transparent;
                -ms-transform: rotate(-60deg);
                -moz-transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
                transform: rotate(-45deg);
            }
        </style>
    </head>
 
    <body>
 
        <h3>利用css的：after跟transform属性代替checkbox效果</h3>
        <div id="container">
            <span><input type="checkbox"class="input_check" id="check3"><label for="check3"></label></span>
            <span><input type="checkbox"class="input_check" id="check4"><label for="check4"></label></span>
        </div>
    </body>
 
</html>
转http://www.tuicool.com/articles/uMzeQf

如何改变checkbox的样式的更多相关文章

  1. 改变checkbox默认样式

    input[type='checkbox']{ width: 5rem; height: 5rem; -webkit-appearance: none; /*清除复选框默认样式*/ backgroun ...

  2. $('.goods_tag_ids_all')[0].checked = true;//~~~~~ 单条改变checkbox 属性样式

    //点击左边全选选中时,都全选$('.goods_tag_ids_all').on('click',function(){ if($('.goods_tag_ids_all').is(':checke ...

  3. 改变checkbox的默认样式

    针对于CheckBox默认样式的改变,和选中状态的改变 <label class="checkBox"><input type="checkbox&qu ...

  4. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  5. 自定义input[type="checkbox"]的样式

    对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...

  6. css美化checkbox的样式

    使用iCheck插件可以改变checkbox.radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的c ...

  7. 如何在鼠标hover时改变标注的样式

    如何在鼠标hover时改变标注的样式? ----------------    教程   ----------------------- 首先创建1张地图 //初始化地图对象,加载地图 var map ...

  8. 改变radio默认样式

    改变radio默认样式,代码如下: <!doctype html> <html> <head> <meta charset="UTF-8" ...

  9. xamarin android checkbox自定义样式

    xamarin android checkbox自定义样式 在drawable文件在新建checkbox_bg.xml文件 <?xml version="1.0" encod ...

随机推荐

  1. 【annotation】非人类物种基因组注释（MSU为例）

    基因组注释工具ANNOVAR是一款非常好用的注释软件,功能强大,输出数据简单美中不足就是对于非人类物种来说UI不够完善,因此总结一下整个注释的过程,帮助别人快乐自己. 首先我们需要明确我们需要的数据和 ...

  2. MySQL中show profiles的开启

    Query Profiler是MYSQL自带的一种query诊断分析工具,通过它可以分析出一条SQL语句的性能瓶颈在什么地方.通常我们是使用的explain,以及slow query log都无法做到 ...

  3. centos6添加mysql服务自启动

    环境: os: centos 6 db:mysql 5.6.40 1.修改/etc/init.d/mysqld文件,默认文件以及存在,该文件内容如下: #!/bin/sh # Copyright Ab ...

  4. MATLAB 均方根误差MSE、两图像的信噪比SNR、峰值信噪比PSNR、结构相似性SSIM

    今天的作业是求两幅图像的MSE.SNR.PSNR.SSIM.代码如下: clc; close all; X = imread('q1.tif');% 读取图像 Y=imread('q2.tif'); ...

  5. 本地Git仓库和Github仓库的关联

    1.我们首先创建一个文件夹(用于保存本地仓) 在我们想要创建的路径下右键鼠标打开Git Bash Here(创建一个文件夹,并进入文件夹) 2.通过命令git init把我们刚才创建的文件夹变成Git ...

  6. objectarx 把当前图形输出

    方法1: AcDbDatabase *pdb; acdbCurDwg()->wblock(pdb); pdb->saveAs(str); pdb->closeInput(true); ...

  7. python程序—用户登录

    编写一个用户登录程序: 1.登录成功显示登录页面 2.登录失败,显示密码错误,并且显示错误几次 3.登录失败三次,退出程序 username= 'root' passwd= ' count= prin ...

  8. AI外包 人工智能外包 长年承接人工智能项目 北京动点软件

    人工智能artificial intelligence,AI是科技研究中最热门的方向之一.像 IBM.谷歌.微软.Facebook  和亚马逊等公司都在研发上投入大量的资金.或者收购那些在机器学习.神 ...

  9. Project Euler 345: Matrix Sum

    题目 思路: 将问题转化成最小费用流 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #incl ...

  10. 树中的路径和 Sum of Distances in Tree

    2019-03-28 15:25:43 问题描述: 问题求解: 写过的最好的Hard题之一. 初看本题,很经典的路径和嘛,dfs一遍肯定可以得到某个节点到其他所有节点的距离和.这种算法的时间复杂度是O ...