• 使用css修改radio、checkbox样式


    1. input[type=radio],input[type=checkbox]  {  
    2.     display: inline-block;  
    3.     vertical-align: middle;  
    4.      20px;  
    5.     height: 20px;  
    6.     margin-left: 5px;  
    7.     -webkit-appearance: none;  
    8.     background-color: transparent;  
    9.     border: 0;  
    10.     outline: !important;  
    11.     line-height: 20px;  
    12.     color: #d8d8d8;  
    13. }  
    14. input[type=radio]:after  {  
    15.     content: "";  
    16.     display:block;  
    17.      20px;  
    18.     height: 20px;  
    19.     border-radius: 50%;  
    20.     text-align: center;  
    21.     line-height: 14px;  
    22.     font-size: 16px;  
    23.     color: #fff;  
    24.     border: 2px solid #ddd;  
    25.     background-color: #fff;  
    26.     box-sizing:border-box;  
    27. }  
    28.   
    29. input[type=checkbox]:after  {  
    30.     content: "";  
    31.     display:block;  
    32.      20px;  
    33.     height: 20px;  
    34.     text-align: center;  
    35.     line-height: 14px;  
    36.     font-size: 16px;  
    37.     color: #fff;  
    38.     border: 2px solid #ddd;  
    39.     background-color: #fff;  
    40.     box-sizing:border-box;  
    41. }  
    42. input[type=checkbox]:checked:after  {  
    43.     border: 4px solid #ddd;  
    44.     background-color: #37AF6E;  
    45. }  
    46.   
    47. input[type=radio]:checked:after  {  
    48.     content: "L";  
    49.     transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);  
    50.     -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);  
    51.     border-color: #37AF6E;  
    52.     background-color: #37AF6E;  
    53. }   
  • 相关阅读:
    微软一站式示例代码浏览器 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  润新知