zoukankan      html  css  js  c++  java
  • 单选多选样式写法

    动画多选样式

    // html
    <div id="box">
    	<input type="checkbox" id="check" name="check" />
    	<label for="check">Checkbox</label>
    </div>
    
    // css
    input[type=checkbox]+label:before {
    	height: 16px;
    	line-height: 16px;
    	 16px;
    	border: 1px solid #000;
    	display: inline-block;
    	vertical-align: top;
    	text-align: center;
    	margin-right: 5px;
    	content: "2713";
    	color: transparent;
    	transition: color ease .3s;
    }
    input[type=checkbox]:checked+label:before {
    	color: #000;
    }
    

    单选按钮样式

    // html
    <div id="box">
    	<input type="radio" id="check" name="check" />
    	<label for="check">Checkbox</label>
    </div>
    // css
    input[type=radio] {
    	display: none;
    }
    input[type=radio]+label:before {
    	display: inline-block;
    	 16px;
    	height: 16px;
    	line-height: 14px;
    	text-align: center;
    	vertical-align: top;
    	margin-right: 20px;
    	content: "26AB";
    	border: 1px solid #000;
    	border-radius: 50%;
    	font-size: 0;
    	transition: font-size ease .3s;
    }
    input[type=radio]:checked+label:before {
    	font-size: 12px;
    }
    

    参考

    掘金-22个必备的CSS小技巧

  • 相关阅读:
    request、bs4爬虫
    1031 查验身份证
    1029 旧键盘
    1028 人口普查
    1027 打印沙漏
    1026 程序运行时间
    1025 反转链表
    1024 科学计数法
    1022 D进制的A+B
    1021 个位数统计
  • 原文地址:https://www.cnblogs.com/bonly-ge/p/10118106.html
Copyright © 2011-2022 走看看