<!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. python源码为何都是pass

    最近看Python代码  按照一个函数递进的看下去,最后发现,遇到很多源码什么逻辑都没写,仅仅以一个pass  结尾          但却能得到应该得到的结果,这点真的很奇怪,上网查找后 觉得下面的 ...

  2. LeetCode数组查找问题

    简单的二分查找法:(Leetcode704): 注意条件(low<=high) public int search(int[] nums, int target) { int low=0; in ...

  3. GCOV&LCOV&GCOVR入门

    索引 一.概述 二.关于gcov的安装 三.代码覆盖率测试(以GCOV为例) 1.编译源代码 2.运行可执行程序 3.通过gcov指令生成代码覆盖率报告 四.生成更全面.直观的代码覆盖率报告 1.LC ...

  4. ntfs读写工具Paragon NTFS 15无限使用教程

    Paragon NTFS mac版是Mac OS平台上最受欢迎的ntfs读写工具,专门开发用来弥补Windows和Mac OS X之间的不兼容性,通过在Mac OS X系统下提供对任何版本的NTFS文 ...

  5. golang从文件按行读取并输出

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

  6. 有些人表面风光，背地里for循环怎么写都要百度

    代码地址 https://github.com/ljshLLW/homework 题目 最大连续子数组和(最大子段和) 给定n个整数(可能为负数)组成的序列a[1],a[2],a[3],-,a[n], ...

  7. dataguard主库删除归档日志后从库恢复的方法

    ------------------方法1在主库上使用备份的进行恢复丢失的归档日志-------------------------1.发现主库备份后删除了归档,但是这些归档从库还没应用,也没有传到从 ...

  8. linux服务基础之DNS正反向解析、主从同步、子域授权及视图

    关键词: 正向解析 反向解析 主从复制 自域授权 视图 一.DNS基本原理 1.1 什么是DNS?BIND又是什么? DNS:Domain Name Service,它是一个基于应用层的协议,是C/S ...

  9. buaacoding_2018算法期末上机G题.地铁建设题解

    // 标注:本文旨在为博主确立一种题解的基本范式,以避免博主的题解流于AC代码的粘贴.此基本范式为:完整而简洁明了的思路及其推导说明,力图触及问题的本质并衍生对同类问题的思路分析,使得题解具有泛用性, ...

  10. vue-router使用 看着篇就够了

    官网地址:https://router.vuejs.org/zh/ 先来个自我介绍吧,我就是你们口中的路由,我的作用就是告诉你们怎么到达某地,比如你想去一个地方(前提是这个地方是已经存在的)我会查询我 ...