CSS3 checkbox复选框和radio单选框美化效果

快乐打工仔 分类:实例代码

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

代码实例如下:

<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<head>
<style type="text/css">
@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;
  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:'16';
  display:inline-block;
  font-size:26.66667px;
  text-align:center;
  line-height:40px;
}
.option-input:checked::after{
  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>
CSS3 checkbox复选框和radio单选框美化效果

回复

我来回复
  • 暂无回复内容