html5動效系列一:10個HTML5美化版復(fù)選框和單選框

2015-5-5    藍(lán)藍(lán)設(shè)計的小編

 

藍(lán)藍(lán)設(shè)計m.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

每一個扁平化界面設(shè)計,都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計

來源:http://www.html5tricks.com/10-pretty-checkbox-radiobox.html

 如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

單選框Radiobox和復(fù)選框checkbox在網(wǎng)頁中也十分常見,雖然它沒有按鈕的交互性強,但是如果能把它們像按鈕那樣美化一下,那也是非常不錯的。本文收集了10個相對比較漂亮的美化版單選框和復(fù)選框,希望你會喜歡。

1、CSS3漂亮的自定義Checkbox復(fù)選框 9款迷人樣式

之前我們分享過一款非常不錯的CSS3自定義checkbox復(fù)選框純CSS3美化Checkbox和Radiobox按鈕,外觀非常時尚。今天我們來分享一款9款樣式迷人的CSS3漂亮的自定義checkbox復(fù)選框。這幾款復(fù)選框樣式很豐富,使用起來也比較方便。

html5-css3-checkbox-styles

在線演示        源碼下載

2、CSS3自定義發(fā)光Radiobox單選框

之前我們分享過一些CSS3和HTML5實現(xiàn)的自定義checkbox和Radiobox,比如純CSS3美化Checkbox和Radiobox按鈕,不僅外觀唯美,而且Radiobox選中時還有動畫效果。今天我們要來分享一款CSS3實現(xiàn)的自定義發(fā)光radiobox單選框插件,該radiobox選中時也有滑塊的動畫。

css3-shine-radiobox

在線演示        源碼下載

3、CSS3自定義美化復(fù)選框Checkbox組合

今天我們要來分享一組非常漂亮的CSS3自定義復(fù)選框checkbox,每一個checkbox都有其各自的特點。有幾款checkbox在選中的情況下還會出現(xiàn)動畫效果,非常不錯的CSS3自定義美化checkbox組合。另外,之前分享過的jQuery實現(xiàn)美化版的單選框和復(fù)選框也是非常不錯。

css3-checkbox-group

在線演示        源碼下載

4、HTML5/CSS3開關(guān)按鈕 立體3D按鈕

之前我介紹過幾款漂亮的CSS3開關(guān)切換按鈕,比如這款CSS3渲染Checkbox實現(xiàn)3D開關(guān)切換按鈕就利用了CSS3和checkbox實現(xiàn)了開關(guān)切換按鈕。今天介紹的這款HTML5/CSS3開關(guān)切換按鈕是利用純CSS3的,代碼非常簡單,3D效果也還可以。

html5-css3-switch-button

在線演示        源碼下載

5、CSS3響應(yīng)式表單 可切換表單主題

之前我們利用CSS3自定義Checkbox自定義Radiobox,這次要分享的一款CSS3響應(yīng)式表單不僅美化了checkbox和Radiobox,而且也自定義美化了輸入框、下拉框以及多項選擇框,幾乎所有的表單元素都美化了,而且整體上還不錯。另外,這款CSS3表單還可以切換主題,換一下表單風(fēng)格也是不錯的。

css3-responsive-form

在線演示        源碼下載

6、非常個性化的CSS3自定義checkbox和radiobox

對于瀏覽器默認(rèn)的checkbox和Radiobox樣式實在是比較丑陋了,今天分享一款非常個性化的CSS3自定義checkbox和Radiobox,外觀非常時尚。之前也分享過幾款類似的CSS3插件,比如HTML5自定義Checkbox和Radiobox、CSS3漂亮的自定義Checkbox復(fù)選框 9款迷人樣式

css3-styled-checkbox-radiobox

在線演示        源碼下載

7、CSS3實現(xiàn)自定義Checkbox動畫

我們在html5tricks網(wǎng)站上分享過很多的CSS3自定義checkbox,改造過的checkbox確實比默認(rèn)的漂亮。今天我們要再來分享一款CSS3自定義checkbox,而且這款checkbox還帶有動畫效果,當(dāng)你選中checkbox的時候,會以動畫的方式打上一個大大的勾。

css3-checkbox-animation

在線演示        源碼下載

8、jQuery實現(xiàn)美化版的單選框和復(fù)選框

之前我們分享過一款CSS3自定義發(fā)光radiobox單選框,也在很早的時候分享過一款純CSS3美化Checkbox和Radiobox按鈕。今天這款是利用jQuery實現(xiàn)的美化版單選框和復(fù)選框,樣式風(fēng)格非常簡潔清爽,是一款很不錯的jQuery按鈕插件。

jquery-pretty-radio-checkbox

在線演示        源碼下載

9、CSS3自定義Checkbox 5種炫酷效果

今天又要來分享關(guān)于美化checkbox的CSS3應(yīng)用了,這次要分享的自定義checkbox一共有5種不同的炫酷效果,其實現(xiàn)也和之前分享的幾款HTML5自定義Checkbox和Radiobox 很酷的選中動畫、CSS3漂亮的自定義Checkbox復(fù)選框 9款迷人樣式類似,也是利用定義label樣式來實現(xiàn)的。

css3-checkbox-button-5-styles

在線演示        源碼下載

10、HTML5自定義Checkbox和Radiobox 很酷的選中動畫

瀏覽器自帶的checkbox和Radiobox的樣式不僅外觀丑陋,而且控制起來也不方便,特別是Checkbox在各個瀏覽器中的樣式都不同,今天我們來利用HTML5和CSS3技術(shù)來自定義Checkbox和Radiobox的樣式,特別是Checkbox,在選中的時候還有非常酷的選中動畫。

htm5-custom-checkbox-radio

在線演示        源碼下載

以上就是10個HTML5美化版復(fù)選框和單選框,歡迎收藏分享。

日歷

鏈接

個人資料

存檔