使用css3美化单选、复选框

浏览器自带的一些ui控件都不太美观，有时候我们需要对这些控件的外观进行美化，美化控件的方式有很多种，可以使用JavaScript，也可以使用纯css样式的方式，由于各个浏览器对css属性支持的不同，使用css美化控可能存在兼容性问题，但顺着IE浏览器市场份额越来越低，甚至可以忽略ie浏览器，我们便可以大胆在项目中使用一些新特性来提高我们项目的用户体验。

(图1) 浏览器默认控件

(图2)使用css美化过后的控件

1、直接贴代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title><br />
    </head>
    <body>
     <div>
         <h5>您最喜欢哪门语言</h5>
            <label><input class="radio" type="radio" name="radio" > java</label>
            <label><input class="radio" type="radio" name="radio"> php</label>
            <label><input class="radio" type="radio" name="radio"> python</label>
            <label><input class="radio" type="radio" name="radio" checked> JavaScript</label>
        </div>      
        <br />
     <div>
         <h5>您最喜欢那些城市</h6>
            <label><input class="checkbox" type="checkbox"  checked> 北京</label>
            <label><input class="checkbox" type="checkbox" checked> 上海</label>
            <label><input class="checkbox" type="checkbox" checked> 杭州</label>
            <label><input class="checkbox" type="checkbox" checked> 西安</label>
       </div>
      <style>
        input{
            outline: none;
        }
        .radio,.checkbox {
            width: 1.2rem;
            height: 1.2rem;
            background-color: #ffffff;
            border: solid 1px #dddddd;
            -webkit-border-radius: 0.6rem;
            border-radius: 0.6rem;
            font-size: 0.8rem;
            margin: 0;
            padding: 0;
            position: relative;
            display: inline-block;
            vertical-align: top;
            cursor: default;
            -webkit-appearance: none;  /**隐藏原生控件**/
        }
                
        .checkbox {
            border-radius: 0.1rem;   /**复选框的圆角要小一些**/
        }
        /**选择后的样式**/
        .radio:checked,.checkbox:checked{
            background-color: #04c9e8;
            border: solid 1px #00adc8;
            box-shadow: 0 1px 1px rgba(0,0,0,.1);
            text-align: center;
            background-clip: padding-box;
        }
         /**选择后 里面小对勾样式**/
        .radio:checked:before,.checkbox:checked:before{
            content: '';
            width: 0.5rem;
            height: 0.3rem;
            border: 1px solid #ffffff;
            border-top: none;
            border-right: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -0.25rem;
            margin-top: -0.25rem;
            -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg);
        }
       </style> 
    </body>
</html>

使用css3美化单选、复选框

使用css3美化单选、复选框

1、直接贴代码

代码比较简单，在这里就不做过多解释了，经测试不兼容ie，请在谷歌浏览器或移动端浏览器下运行。

推荐阅读更多精彩内容