form表单美化

form表单美化

by Meng Tao

HTML

<div class="container">
    <div class="radio_all">
        <h1>Radio美化</h1>
        <input type="radio" id="male" name="sex">
        <label for="male">男</label>
        <input type="radio" id="female" name="sex">
        <label for="female">女</label>
        <input type="radio" id="other" name="sex" checked>
        <label for="other">保密</label>
    </div>
    <div class="checkbox">
        <h1>CheckBox美化</h1>
        <input type="checkbox" id="Java" name="lang">
        <label for="Java">Java</label>
        <input type="checkbox" id="JavaScript" name="lang">
        <label for="JavaScript">JavaScript</label>
        <input type="checkbox" id="Vuejs" name="lang">
        <label for="Vuejs">Vuejs</label>
        <input type="checkbox" id="React" name="lang">
        <label for="React">React</label>
    </div>
    <div class="select">
        <select class="i-select">
            <option value="百度">baidu</option>
            <option value="谷歌">Google</option>
            <option value="谷歌1">this is google web site</option>
        </select>
    </div>
    <div class="input-text">
        <h1>input text</h1>
        <label for="name">用户名</label><input id="name" type="text" name="name" placeholder="用户名" autocomplete="off">
    </div>
</div>

CSS

*{margin: 0;padding: 0}
        body{line-height: 2}
        h1{
            font-size: 28px;
        }
        .radio_all{
            width: 80%;
            margin: 10px auto;
            font-size: 16px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .radio_all input[type='radio']{
            display: none;
        }
        .radio_all input[type='radio'] + label{
            display: inline-block;
            background: url("http://www.egtch.com/demo/svg/nocheck_16.svg") left center no-repeat;
            cursor: pointer;
            padding: 0 5px 0 18px;
            margin-right: 10px;
        }
        .radio_all input[type='radio']:checked + label{
            background: url("http://www.egtch.com/demo/svg/check_16.svg") left center no-repeat;
            -webkit-animation: bounce 0.3s;
            -moz-animation: bounce 0.3s;
            animation: bounce 0.3s;
        }
        .checkbox{
            width: 80%;
            margin: 10px auto;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .checkbox input[type='checkbox']{
            display: none;
        }
        .checkbox input[type='checkbox'] + label{
            left: 0;
            display: inline-block;
            background: url("http://www.egtch.com/demo/svg/checkbox_16.svg") left center no-repeat;
            cursor: pointer;
            z-index: 2;
            padding: 0 5px 0 18px;
        }
        .checkbox input[type='checkbox']:checked + label{
            background: url("http://www.egtch.com/demo/svg/icheckbox_16.svg") left center no-repeat;
            -webkit-animation: bounce 0.3s;
            -moz-animation: bounce 0.3s;
            animation: bounce 0.3s;
        }
        .select{
            width: 80%;
            margin: 10px auto;
        }
       ...