HTML的checkbox和radio样式美化的简单实例

HTML的checkbox和radio样式美化的简单实例

checkbox：

XML/HTML Code复制内容到剪贴板

<style type="text/css">  
    input[type="checkbox"]   
    {   
        display: none;   
    }   
  
        input[type="checkbox"] + label   
        {   
            display: inline-block;   
            position: relative;   
            border: solid 2px #99a1a7;   
            width: 35px;   
            height: 35px;   
            line-height: 35px;   
            border-radius: 4px;   
        }   
  
        input[type="checkbox"]:checked + label:after   
        {   
            content: ‘2714’;   
            font-size: 25px;   
            color: #99a1a7;   
            width: 35px;   
            height: 35px;   
            line-height: 35px;   
            position: absolute;   
            text-align: center;   
            background-color: #e9ecee;   
        }   
  
    .tab   
    {   
        margin-top: 20px;   
        margin-bottom: 20px;