css3的实现的checkbox复选框和radio单选框绚丽美化效果_html/css

首頁

web前端

html教學

css3的实现的checkbox复选框和radio单选框绚丽美化效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

css3的实现的checkbox复选框和radio单选框绚丽美化效果:
在css3之前要美化单选框和复选框无非是使用图片进行相关的替换操作，并且还有很大的局限性。
由于css3的出现，一切好像变的都变的轻松起来，并且效果非常的绚丽，这是使用css2无法做到的，下面就分享一段能够实现此功能的代码实例，需要的朋友可以做一下参考。
代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><head><style type="text/css">@-webkit-keyframes click-wave{  0%{    width:40px;    height:40px;    opacity:0.35;    position:relative;  }  100%{    width:200px;    height:200px;    margin-left:-80px;    margin-top:-80px;    opacity:0.0;  }}@-moz-keyframes click-wave{  0%{    width:40px;    height:40px;    opacity:0.35;    position:relative;  }  100%{    width:200px;    height:200px;    margin-left:-80px;    margin-top:-80px;    opacity:0.0;  }}@-o-keyframes click-wave{  0%{    width:40px;    height:40px;    opacity:0.35;    position:relative;  }  100%{    width:200px;    height:200px;    margin-left:-80px;    margin-top:-80px;    opacity:0.0;  }}@keyframes click-wave{  0%{    width:40px;    height:40px;    opacity:0.35;    position: relative;  }  100%{    width:200px;    height:200px;    margin-left:-80px;    margin-top:-80px;    opacity:0.0;  }}.option-input{  -webkit-appearance:none;  -moz-appearance:none;  -ms-appearance:none;  -o-appearance:none;  appearance:none;  position:relative;  top:13.33333px;  width:40px;  height:40px;  -webkit-transition:all 0.15s ease-out 0;  -moz-transition:all 0.15s ease-out 0;  transition:all 0.15s ease-out 0;  background:#cbd1d8;  border:none;  color:#fff;  cursor:pointer;  display:inline-block;  outline:none;  position:relative;  margin-right:0.5rem;  z-index:1000;}.option-input:hover{  background:#9faab7;}.option-input:checked{  background:#40e0d0;}.option-input:checked::before{  width:40px;  height:40px;  position:absolute;  content:'\2716';  display:inline-block;  font-size:26.66667px;  text-align:center;  line-height:40px;}.option-input:checked::after{  -webkit-animation:click-wave 0.65s;  -moz-animation:click-wave 0.65s;  animation:click-wave 0.65s;  background:#40e0d0;  content:'';  display:block;  position:relative;  z-index:100;}.option-input.radio{  border-radius:50%;}.option-input.radio::after{  border-radius:50%;}body{  display:-webkit-box;  display:-moz-box;  display:box;  -webkit-box-orient:horizontal;  -moz-box-orient:horizontal;  box-orient:horizontal;  -webkit-box-pack:start;  -moz-box-pack:start;  box-pack:start;  -webkit-box-align:stretch;  -moz-box-align:stretch;  box-align:stretch;  background:#e8ebee;  color:#9faab7;  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;  text-align:center;}body div{  padding:5rem;}body label{  display:block;  line-height:40px;}</style></head><body><div style="width:200px;float:left">  <label><input type="checkbox" class="option-input checkbox" checked="">Checkbox </label>  <label><input type="checkbox" class="option-input checkbox">Checkbox</label>  <label><input type="checkbox" class="option-input checkbox">Checkbox</label></div><div style="width:200px;float:left">  <label><input type="radio" class="option-input radio" name="example">Radio option</label>  <label><input type="radio" class="option-input radio" name="example">Radio option</label>  <label><input type="radio" class="option-input radio" name="example">Radio option</label></div></body></html>

登入後複製

上面的代码实现了我们的要求，这里不多介绍，如有问题可以跟帖留言。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15388

更多内容可以参阅:http://www.softwhy.com/divcss/

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1655

CakePHP 教程

1413

Laravel 教程

1306

PHP教程

1252

C# 教程

1226

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。