zoukankan      html  css  js  c++  java
  • 修改checkbox样式-1

    说明

    使用伪类来对复选框进行样式修改。以下以最简单的一个样式修改为实例进行说明。

    步骤介绍:

    1. 将一个label与复选框进行绑定,将两者放在同一个div下
    2. 调整 label的外部样式使其作为复选框的外形
    3. 调整 label::after,使其作为复选框的对勾样式
    4. 绑定复选框的checked样式和 label::after ,使复选框被选择之后即可改变 label::after 样式
    5. 隐藏复选框

    编码以及说明

    css

    .checkbox{
        /*预先设定大div的样式*/
    	 50px;
    	margin: 20px 100px;
    	position: relative;
    }
    .checkbox label{
        /*
        cursor属性设定鼠标的样式
        其他属性设定复选框外形
        */
    	cursor: pointer;
    	position: absolute;
    	 10px;
    	height: 10px;
    	top: 0;
    	left: 0;
    	background: #eee;
    	border:1px solid #ddd;
    }
    .checkbox label:after{
        /*
        设定复选框对勾的样式,被选择之前的样式
        1. 设定长宽
        2. 透明背景,设置成对勾
        3. 旋转45度,并兼容各浏览器
        */
    	opacity: 0.2;
    	content: '';
    	position: absolute;
    	 9px;
    	height: 5px;
    	background: transparent;
    	
    	border: 3px solid #333;
    	border-top: none;
    	border-right: none;
    
    	-webkit-transform: rotate(-45deg);  /* Safari 和 Chrome */
    	-moz-transform: rotate(-45deg);  /* Firefox */
    	-o-transform: rotate(-45deg);  /* Opera */
    	-ms-transform: rotate(-45deg);  /*IE9*/
    	transform: rotate(-45deg);
    }
    .checkbox label:hover::after{
        /*  鼠标移动到label之后的样式改变  */
    	opacity: 0.5;
    }
    .checkbox input[type="checkbox"]:checked + label:after{
        /*  绑定复选框的checked和 label::after */
    	opacity: 1;
    }
    input[type=checkbox] {
        /*  隐藏复选框  */
    	visibility: hidden;
    }
    

    html

    <div class="checkbox">
    	<input type="checkbox" value="1" id="checkboxInput" name="" />
    	<label for="checkboxInput"></label>
    </div>
    

    参考链接

    How To Style A Checkbox With CSS

  • 相关阅读:
    VC获取系统时间、程序运行时间
    数学题
    最小费用流
    最大流模板
    计划
    算法竞赛入门经典 训练指南 之 图论(完全版持续更新)
    uva 11324 The Largest Clique 强连通分量求缩点构造DAG
    hdu 4288 Coder 一个很水的版本 >_<
    hoj 2939 Coin Question
    成都网络赛 1002 Control 1005 Food
  • 原文地址:https://www.cnblogs.com/fengzzi/p/10216550.html
Copyright © 2011-2022 走看看