CSS3美化表單控件

CSS3美化表單控件

2016-06-28 18:14 by 圖書館的牧羊人, 582 閱讀, 9 評論, 收藏,  編輯

表單的默認控件在不一樣的瀏覽器中的樣式不一樣，用戶體驗不好。用CSS3能夠實現表單控件的美化，能夠提供更好的用戶體驗。不足之處就是瀏覽器的兼容性問題。

一.下拉控件

效果圖：

下拉控件的佈局結構：

<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用來模擬下拉列表，在實際的使用過程當中，能夠根據後臺返回過來的數據動態生成。p元素用來渲染選中的選項。

核心樣式：

.container .select{ width: 300px; height: 40px; font-size: 14px; background-color:#fff; margin-left: auto; margin-right: auto; position: relative; } /*下拉箭頭的樣式*/ .container .select:after{ content: ""; display: block; width: 10px; height: 10px; position: absolute; top: 11px; right: 12px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: transform .2s ease-in, top .2s ease-in; transition: transform .2s ease-in, top .2s ease-in; } /* 被選中的列表項顯示的區域 */ .container .select p{ padding: 0 15px; line-height: 40px; cursor: pointer; } /* 下拉列表的樣式 默認高度爲0 */ .container .select ul{ list-style: none; background-color: #fff; width: 100%; overflow-y: auto; position: absolute; top: 40px; left: 0; max-height:0; -webkit-transition: max-height .3s ease-in; transition: max-height .3s ease-in; } .container .select ul li{ padding: 0 15px; line-height: 40px; cursor: pointer; } .container .select ul li:hover{ background-color: #e0e0e0; } .container .select ul li.selected{ background-color: #39f; color: #fff; } /*下拉控件動畫*/ @-webkit-keyframes slide-down{ 0%{ -webkit-transform: scale(1, 0); transform: scale(1, 0); } 25%{ -webkit-transform: scale(1, 1.2); transform: scale(1, 1.2); } 50%{ -webkit-transform: scale(1, .85); transform: scale(1, .85); } 75%{ -webkit-transform: scale(1, 1.05); transform: scale(1, 1.05); } 100%{ -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes slide-down{ 0%{ -webkit-transform: scale(1, 0); transform: scale(1, 0); } 25%{ -webkit-transform: scale(1, 1.2); transform: scale(1, 1.2); } 50%{ -webkit-transform: scale(1, .85); transform: scale(1, .85); } 75%{ -webkit-transform: scale(1, 1.05); transform: scale(1, 1.05); } 100%{ -webkit-transform: scale(1, 1); transform: scale(1, 1); } } .container .select.on ul{ /* 默認狀況下,ul的高度爲0,當點擊控控件的時候, 設置下拉列表的高度。 */ max-height: 300px; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: slide-down .5s ease-in; animation: slide-down .5s ease-in; } /*下拉選項被選中後控制箭頭的方向*/ .container .select.on:after{ -webkit-transform: rotate(-225deg); transform: rotate(-225deg); top: 18px; }

View Code

這裏只是靜態的樣式，若是要實現「選擇」這個過程，須要用到JavaScript來實現。

$(function(){ var selected = $('.select > p'); //控制列表顯隱 selected.on('click', function(event){ $(this).parent('.select').toggleClass('on'); event.stopPropagation(); }); //點擊列表項,將列表項的值添加到p標籤中 $('.select li').on('click', function(event){ var self = $(this); selected.text(self.data('value')); }); //點擊文檔其餘區域隱藏列表 $(document).on('click', function(){ $('.select').removeClass('on'); }); });

二 美化單選框

lable標籤能夠經過for屬性與單選框實現聯動。咱們利用這一特性來實現美化單選框，這也是原理所在。還有就是別忘了將真正的單選框(type="radio")隱藏掉。

/*用過label標籤來模擬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; }

最後效果：

三 美化複選框

原理和單選框的製做方式相似。在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; }