CSS 美化radio checkbox

CSS 样式

 <style type="text/css">
        .option-input {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;     
            width: 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 {
                    width: 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>