-
使用css修改radio、checkbox样式
- input[type=radio],input[type=checkbox] {
- display: inline-block;
- vertical-align: middle;
- 20px;
- height: 20px;
- margin-left: 5px;
- -webkit-appearance: none;
- background-color: transparent;
- border: 0;
- outline: 0 !important;
- line-height: 20px;
- color: #d8d8d8;
- }
- input[type=radio]:after {
- content: "";
- display:block;
- 20px;
- height: 20px;
- border-radius: 50%;
- text-align: center;
- line-height: 14px;
- font-size: 16px;
- color: #fff;
- border: 2px solid #ddd;
- background-color: #fff;
- box-sizing:border-box;
- }
-
- input[type=checkbox]:after {
- content: "";
- display:block;
- 20px;
- height: 20px;
- text-align: center;
- line-height: 14px;
- font-size: 16px;
- color: #fff;
- border: 2px solid #ddd;
- background-color: #fff;
- box-sizing:border-box;
- }
- input[type=checkbox]:checked:after {
- border: 4px solid #ddd;
- background-color: #37AF6E;
- }
-
- input[type=radio]:checked:after {
- content: "L";
- transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
- -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
- border-color: #37AF6E;
- background-color: #37AF6E;
- }
-
相关阅读:
微软一站式示例代码浏览器 v5.1 更新
Developers’ Musthave: the new Microsoft AllInOne Code Framework Sample Browser and 3500+ samples
栈溢出攻击 [转]
深入浅出Java的访问者模式 [转]
优先级反转 [转]
latex 引用section [转]
linux内存管理浅析 [转]
静态,动态,强类型,弱类型 [转]
linux硬链接与软链接 [转]
GCC __attribute__ 详解 [转]
-
原文地址:https://www.cnblogs.com/da-yao/p/8080378.html
Copyright © 2020-2023
润新知