<!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. Linq、Lambda表达式详细总结(转)

    (一)输入参数 在Lambda表达式中,输入参数是Lambda运算符的 左边部分.它包含参数的数量可以为0.1或者多个.只有当输入参数为1时,Lambda表达式左边的一对小括弧才可以省略.输入参数的数 ...

  2. 劳德巴赫下载kernel和文件系统时问题

    用劳德巴赫下载 kernel  dtb rootfs BOOT.bin 报错(记了个大概) Bad CRC Ramdisk image is corrupt or invalid 记得之前有人和我说r ...

  3. composer安装。

    我们这里实在Windows下进行的安装.1.下载Composer安装包.网址:https://getcomposer.org/download/下载Composer-Setup.exe 安装文件.2. ...

  4. opencv检错：程序运行过程正常，当跳出函数时出现断言错误（Debug Assertion Failed）

    转载http://blog.csdn.net/u012327581/article/details/51351780 1.问题描述 在VS2015下配置好Opencv后,程序在函数运行过程中正常,调试 ...

  5. 国际空间站直播 ISS直播

    b站:https://live.bilibili.com/9196015 斗鱼:https://www.douyu.com/543816 欢迎大家 (ฅ´ω`ฅ)

  6. android开发_view和view属性

    一.view视图的宽度和高度属性,属性值:固定和浮动两种状态 1属性为固定值 <View android:layout_width="30dp" android:layout ...

  7. testng timeout ant

    问题:使用ant 指令运行testng.xml文件,@Test注释timeout未生效 解决:添加以下几个jar包

  8. Gradle安装和在Eclipse中的使用

    Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的各种繁琐配置. 1 ...

  9. iOS has conflicting provisioning settings 解法

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  10. loj #6.Guess Number

    原题链接:https://loj.ac/problem/6 Guess Number 内存限制:256 MiB 时间限制:1000 ms 题目类型:交互 题目描述 这是一个交互题的模板. 系统会随机生 ...