表單的默認(rèn)控件在不同的瀏覽器中的樣式不同，用戶體驗很差。用CSS3可以實現(xiàn)表單控件的美化，可以提供更好的用戶體驗。不足之處就是瀏覽器的兼容性問題。所以我們很有必要學(xué)習(xí)CSS3 。

 

一.下拉控件

效果圖：

下拉控件的布局結(jié)構(gòu)：

 

<div class="container">

        <div class="select">

            <p>所有選項</p>

            <ul>

                <li class="selected" data-value="所有選項">所有選項</li>

                <li data-value="Python">Python</li>

                <li data-value="Javascript">Javascript</li>

                <li data-value="Java">Java</li>

                <li data-value="Ruby">Ruby</li>

            </ul>

        </div>

    </div>

 

ul用來模擬下拉列表，在實際的使用過程中，可以根據(jù)后臺返回過來的數(shù)據(jù)動態(tài)生成。p元素用來渲染選中的選項。

核心樣式：

 View Code

這里只是靜態(tài)的樣式，如果要實現(xiàn)“選擇”這個過程，需要用到JavaScript來實現(xiàn)。

 

$(function(){

    var selected  = $('.select > p');

    //控制列表顯隱

    selected.on('click', function(event){

        $(this).parent('.select').toggleClass('on');

        event.stopPropagation();

    });

    //點擊列表項,將列表項的值添加到p標(biāo)簽中

    $('.select li').on('click', function(event){

        var self = $(this);

        selected.text(self.data('value'));

    });

    //點擊文檔其他區(qū)域隱藏列表

    $(document).on('click', function(){

        $('.select').removeClass('on');

    });

});

 

二 美化單選框

lable標(biāo)簽可以通過for屬性與單選框?qū)崿F(xiàn)聯(lián)動。我們利用這一特性來實現(xiàn)美化單選框，這也是原理所在。還有就是別忘了將真正的單選框(type="radio")隱藏掉。

 

/*用過label標(biāo)簽來模擬radio 的樣式*/

.radio-block label{

    display: inline-block;

    position: relative;

    width: 28px;

    height: 28px;

    border: 1px solid #cccccc;

    background-color: #fff;

    border-radius: 28px;

    cursor: pointer;

    margin-right:10px;

}

 

input[type="radio"]{

    display: none;

}

.radio-block label:after{

    content: '';

    display: block;

    position: absolute;

    width: 20px;

    height: 20px;

    left: 4px;

    top: 4px;

    background-color: #28bd12;

    border-radius: 20px;

    /*通過scale屬性來控制中心點*/

    -webkit-transform: scale(0);

    transform: scale(0);

}/*選中樣式*/

input[type="radio"]:checked + label{

    background-color :#eee;

    -webkit-transition: background-color .3s ease-in;

    transition: background-color .3s ease-in;

}/*選中之后的樣式*/

input[type="radio"]:checked + label:after{

    -webkit-transform: scale(1);

    transform: scale(1);

    -webkit-transition: transform .2s ease-in;

    transition: transform .2s ease-in;

}

 

最后效果：

三 美化復(fù)選框

原理和單選框的制作方式類似。在checked的時候該表圓形的left值和label的背景。

 

.switch-block{

    width: 980px;

    padding: 3% 0;

    margin: 0 auto;

    text-align: center;

    background-color: #fc9;

}

.switch-block label{

    display: inline-block;

    width: 62px;

    height: 30px;

    background-color:#fafafa;

    border:1px solid #eee;

    border-radius: 16px;

    position: relative;

    margin-right: 10px;

    cursor: pointer;

    -webkit-transition: background .2s ease-in;

    transition :background .2s ease-in;

}

input[type="checkbox"]{

    display: none;

}

.switch-block label:after{

    content: '';

    position: absolute;

    width: 28px;

    height: 28px;

    border: 1px solid #eee;

    border-radius: 14px;

    left: 1px;

    background-color:#fff;

    -webkit-transition: left .2s ease-in;

    transition: left .2s ease-in;

}

.switch-block input[type="checkbox"]:checked + label{

    background-color:#3c6;

    -webkit-transition: background .2s ease-in;

    transition :background .2s ease-in;

}

.switch-block input[type="checkbox"]:checked + label:after{

    left: 32px;

    -webkit-transition: left .2s ease-in;

    transition: left .2s ease-in;

}

 

原文作者：薯條半價