原生JS表单美化

1.表单美化—单选框

html结构

    

         男
         女
    
    

         本科
         大专
    

css样式

    .radio{
        display:inline-block;
        width:20px;
                height:20px;
        border-radius:50%;
        border:1px solid #666;
        margin-right:5px;
        margin-bottom:20px;
        vertical-align:top;
        text-align:center;
        cursor:pointer;
        user-select:none;
    }
    .radio.active:after{
        content:"•";
        font-size:30px;
        line-height:16px;
    }

js代码

2.表单美化—复选框

html结构

    

         川菜
         粤菜
         鲁菜
    
    

         足球
         篮球
         排球
    
    

         足球
         篮球
         排球
    

css样式

    .checkbox{
        display:inline-block;
        width:20px;height:20px;
        border-radius:3px;
        border:1px solid #666;
        margin-right:5px;
        margin-bottom:20px;
        vertical-align:top;
        text-align:center;
        cursor:pointer;
        user-select:none;
    }
    .checkbox.active:after{
        content:"√";
        font-size:20px;
        line-height:16px;
    }

js代码

3.表单美化—下拉列表

html结构

    
        请选择
        本科
        大专
        中专
    

    
        请选择
        轻音乐
        流行音乐
        摇滚
    

css样式

    .select-wrap{
        position:relative;
        display:inline-block;
    }
    .select-wrap a{
        text-decoration:none;
        display:block;
        border:1px solid #999;
        padding:3px 5px;
        border-radius:3px;
        color:#303030;
    }
    .select-wrap a:after{
        display:inline-block;
        float:right;
        content:"▼";
    }
    .select-wrap ul{
        display:none;
        padding:3px 0;
        min-width:100px;
        margin:0;
        position:absolute;
        list-style:none;
        border:1px solid #999;
        background-color:#fff;
    }
    .select-wrap ul > li{
        padding:2px 5px;
        cursor:default;
    }
    .select-wrap ul > li:hover{
        background-color:#ccc;
    }

js代码

4.表单美化—上传按钮

html结构

css样式

js代码

5.表单美化—滑块

html结构

模拟系统滑块


    
    

css样式

js代码