zoukankan      html  css  js  c++  java
  • CSS 美化radio checkbox

    CSS 样式

     <style type="text/css">
            .option-input {
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                -o-appearance: none;     
                 16px;
                height: 16px;                  
                background: #cbd1d8;
                border: none;
                color: #fff;
                cursor: pointer;
                display: inline-block;
                outline: none;          
            }
           
                .option-input:hover {
                    background: #9faab7;
                }
    
                .option-input:checked {
                    background: #40e0d0;
                }
    
                    .option-input:checked::before {
                         16px;
                        height: 16px;
                        position: absolute;
                        content: '2714'; /*对号*/
                        display: inline-block;
                        text-align: center;
                    }
    
                    .option-input:checked::after {
                        background: #40e0d0;
                        display: block;
                        position: relative;
                      
                    }
    
                .option-input.radio {
                    border-radius: 50%;
                }
    
                    .option-input.radio::after {
                        border-radius: 50%;
                    }
    
            table td {
            border:1px solid black;
            }
        </style>
    

      body:[ content:属性修改现实的内容:http://blog.csdn.net/u013261261/article/details/44562907]

     <table>
            <tr>
                <td>
                    <input type="checkbox" class="option-input checkbox"  style="top:4px;position:relative;" checked="checked" />
                    121221
                </td>
            </tr>
            <tr>
                <td> <input type="radio" class="option-input radio"/>1212</td>
            </tr>
        </table>
    

      

  • 相关阅读:
    APICloud学习笔记之Click事件优化
    APICloud学习笔记之doT模板
    APICloud学习笔记之上拉加载
    APICloud学习笔记之下拉刷新
    5. JavaScript 正则表达式
    4. JavaScript 控制语句
    3. JavaScript 数据类型
    2. 语法
    1.开篇
    C++内存申请容易产生的错误
  • 原文地址:https://www.cnblogs.com/lgjc/p/5786727.html
Copyright © 2011-2022 走看看