CSS3 checkbox核取方塊和radio單選框美化效果

admin發表於2018-07-20
CSSS3

CSS3之前要美化單選框和核取方塊無非是使用圖片進行相關的替換操作，並且還有很大的侷限性，CSS3的出現，一切變的輕鬆起來，效果非常的絢麗，下面就分享一段能夠實現此功能的程式碼例項，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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:'\2716';
  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>

相關文章