<!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. golang从文件按行读取并输出

    package main import ( "fmt" "os" "bufio" "io" "time&quo ...

  2. Angular4基本网络请求get、post方式

    1.在路径C:\AngularProject\AngularTest\src\app\app.module.ts这个文件下面引入 2.在需要用到的js文件引入 3.GET/POST  带参/不带参请求

  3. 解决Win10 PowerShell无法激活Anaconda环境的问题

    最近在使用Anaconda的过程中,发现在Win10的PowerShell在使用conda activate 环境名激活环境时无效,而CMD则可以.这里前提必须将Anaconda 写入环境变量.否则在 ...

  4. Docker Swarm Mode 学习笔记（聊聊 replicas）

    在 Swarm 集群中, 创建服务时可以通过设置 --replicas 参数来指定此服务在工作节点上运行的任务数. 示例 这里我们来创建一个 nginx 服务作为示例: version: '3' se ...

  5. HDU 3085 Nightmare Ⅱ（噩梦 Ⅱ）

    HDU 3085 Nightmare Ⅱ(噩梦 Ⅱ) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Ja ...

  6. T57274 黑暗城堡

    传送门 思路: 先求出各个点到 1 的最短路径.分别用两个数组将最短路径记录下来(一个要用来排序).按排序后的 dis 值从小到大枚举各点加入树有多少种方案,最后根据乘法原理把各个点的方案数乘起来就是 ...

  7. C++_day06_运算符重载_智能指针

    1.只有函数运算符可以带缺省函数,其他运算符函数主要由操作符个数确定 2.解引用运算符和指针运算符 示例代码: #include <iostream> using namespace st ...

  8. App 打包

    记录一下: 1. applicationIdSuffix 实现不同 ApplicationId 打包,buildTypes 中添加编译后会成功生成加对应后缀的ApplicationId.在 produ ...

  9. react初探（二）之父子组件通信、封装公共组件

    一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...

  10. 关于虹软人脸识别SDK的接入

    背景: 虹软的人脸识别还是不错的,在官方注册一个账号,成为开发者,下载SDK的jar包,在开发者中心,找一个demo就可以开始做了,安装里边的逻辑,先看理解代码,然后就可以控制代码,完成自己想要的功能 ...