css3單選框、核取方塊和開關按鈕美化效果程式碼例項

admin發表於2017-02-25

本章節分享一段程式碼例項，它實現了單選框、核取方塊和開關按鈕的美化效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>仿微信可換膚的CSS3美化表單，</title>
<style>
.box {
  width: 80%;
  border: 1px solid #ccc;
  padding: 30px;
  margin: 30px auto;
  position: relative;
}
.box h2 {
  width: 100%;
  height: 30px;
  top: 20px;
  right: 30px;
  text-align: right;
  position: absolute;
}
.box h2 span {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 2px;
  background: red;
}
.box p {
  font-size: 16px;
  border-bottom: 1px dashed #4cd964;
  padding: 12px 0;
  padding-top: 9px;
}
.toggle {
  position: relative;
  display: inline-block;
  pointer-events: auto;
  width: 100%;
  border-bottom: 1px dashed #ccc;
}
.labelTxt {
  display: inline-block;
  height: 51px;
  line-height: 51px;
  float: left;
}
/*switch*/
.toggle .track-switch {
  transition: all ease-in-out 0.25s 0s;
  display: inline-block;
  box-sizing: border-box;
  width: 51px;
  height: 31px;
  border: solid 2px #e6e6e6;
  border-radius: 20px;
  background-color: #fff;
  content: ' ';
  cursor: pointer;
  pointer-events: none;
  float: left;
  margin: 10px 10px 0 0;
  position: relative;
}
.toggle .track-switch .handle {
  position: absolute;
  top: 0px;
  left: 0;
  width: 27px;
  height: 27px;
  border-radius: 100%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0,0,0,0.35),0 1px 1px rgba(0,0,0,0.15);
  transition: background,transform 0.3s cubic-bezier(0,1.1,1,1.1) 0s;
}
.toggle input:checked + .track-switch .handle {
  -webkit-transform: translate3d(20px,0,0);
  transform: translate3d(20px,0,0);
  background-color: #fff;
}
.toggle input:checked + .track-switch {
  border-color: #4cd964;
  background-color: #4cd964;
}
/*checkbox*/
.toggle .track-checkbox {
  transition: all ease-in-out 0.25s 0s;
  display: inline-block;
  box-sizing: border-box;
  width: 31px;
  height: 31px;
  border: solid 2px #e6e6e6;
  border-radius: 100%;
  background-color: #fff;
  content: ' ';
  cursor: pointer;
  pointer-events: none;
  float: left;
  margin: 8px 10px 0 0;
  position: relative;
}
.toggle .track-checkbox .handle {
  position: absolute;
  top: 0px;
  left: 0;
  width: 27px;
  height: 27px;
  border-radius: 100%;
  transition: background,visibility,transform 0.3s cubic-bezier(0,1.1,1,1.1) 0s;
}
.toggle .track-checkbox .handle::before {
  content: " ";
  left: 9px;
  top: 12px;
  position: absolute;
  width: 2px;
  height: 30%;
  background: #4cd964;
  transform: rotate(-40deg);
  transition: all 0.3s cubic-bezier(0,1.1,1,1.1) 0s;
  visibility: hidden;
}
.toggle .track-checkbox .handle::after {
  content: " ";
  left: 16px;
  top: 6px;
  position: absolute;
  width: 2px;
  height: 58%;
  background: #4cd964;
  transform: rotate(-140deg);
  transition: all 0.3s cubic-bezier(0,1.1,1,1.1) 0s;
  visibility: hidden;
}
.toggle input:checked + .track-checkbox {
  border-color: #4cd964;
  background-color: #4cd964;
}
.toggle input:checked + .track-checkbox .handle::before {
  visibility: visible;
  background: #fff;
}
.toggle input:checked + .track-checkbox .handle::after {
  visibility: visible;
  background: #fff;
}
/*radio*/
.toggle .track-radio {
  transition: all ease-in-out 0.25s 0s;
  display: inline-block;
  box-sizing: border-box;
  width: 31px;
  height: 31px;
  border: solid 2px #e6e6e6;
  border-radius: 100%;
  background-color: #fff;
  content: ' ';
  cursor: pointer;
  pointer-events: none;
  float: left;
  margin: 8px 10px 0 0;
  position: relative;
}
 .toggle .track-radio .handle {
  position: absolute;
  top: 0px;
  left: 0;
  width: 27px;
  height: 27px;
  border-radius: 100%;
  transition: background,visibility,transform 0.3s cubic-bezier(0,1.1,1,1.1) 0s;
}
.toggle .track-radio .handle: :before {
  content: " ";
  left: 9px;
  top: 12px;
  position: absolute;
  width: 2px;
  height: 30%;
  background: #4cd964;
  transform: rotate(-40deg);
  transition: all 0.3s cubic-bezier(0, 1.1, 1, 1.1)0s;
  visibility: hidden;
}
.toggle .track-radio .handle: :after {
  content: " ";
  left: 16px;
  top: 6px;
  position: absolute;
  width: 2px;
  height: 58%;
  background: #4cd964;
  transform: rotate(-140deg);
  transition: all 0.3s cubic-bezier(0, 1.1, 1, 1.1)0s;
  visibility: hidden;
}
.toggle input: checked + .track-radio {
  border-color: #4cd964;
  background-color: #4cd964;
}
.toggle input: checked + .track-radio .handle: :before {
  visibility: visible;
  background: #fff;
}
.toggle input: checked + .track-radio .handle: :after {
  visibility: visible;
  background: #fff;
}
/*皮膚*/
.red input: checked + .track-switch {
  border-color: #ef473a;
  background-color: #ef473a;
}
.red input: checked + .track-checkbox {
  border-color: #ef473a;
  background-color: #ef473a;
}
.red .track-checkbox .handle: :before {
  background: #ef473a;
}
.red .track-checkbox .handle: :after {
  background: #ef473a;
}
.red input: checked + .track-radio {
  border-color: #ef473a;
  background-color: #ef473a;
}
.yellow input: checked + .track-switch {
  border-color: #f90;
  background-color: #f90;
}
.yellow input: checked + .track-checkbox {
  border-color: #f90;
  background-color: #f90;
}
.yellow .track-checkbox .handle: :before {
  background: #f90;
}
.yellow .track-checkbox .handle: :after {
  background: #f90;
}
.yellow input: checked + .track-radio {
  border-color: #f90;
  background-color: #f90;
}
.blue input: checked + .track-switch {
  border-color: #0c63ee;
  background-color: #0c63ee;
}
.blue input: checked + .track-checkbox {
  border-color: #0c63ee;
  background-color: #0c63ee;
}
.blue .track-checkbox .handle: :before {
  background: #0c63ee;
}
.blue .track-checkbox .handle: :after {
  background: #0c63ee;
}
.blue input: checked + .track-radio {
  border-color: #0c63ee;
  background-color: #0c63ee;
}
.dark input: checked + .track-switch {
  border-color: #505050;
  background-color: #505050;
}
.dark input: checked + .track-checkbox {
  border-color: #505050;
  background-color: #505050;
}
.dark .track-checkbox .handle: :before {
  background: #505050;
}
.dark .track-checkbox .handle: :after {
  background: #505050;
}
.dark input: checked + .track-radio {
  border-color: #505050;
  background-color: #505050;
}
</style>
</head>
<body>
<div class="box">
  <h2>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </h2>
  <p>選擇開關</p>
  <label class="toggle clearfix">
    <input type="checkbox" checked style="display: none;">
    <div class="track-switch">
      <div class="handle"></div>
    </div>
    <div class="labelTxt">是否同意條款</div>
  </label>
  <p>複選列表項</p>
  <label class="toggle clearfix">
    <input type="checkbox" checked style="display: none;">
    <div class="track-checkbox">
      <div class="handle"></div>
    </div>
    <div class="labelTxt">我的職業是前端工程師</div>
  </label>
  <label class="toggle clearfix">
    <input type="checkbox" checked style="display: none;">
      <div class="track-checkbox">
      <div class="handle"></div>
    </div>
    <div class="labelTxt">我的職業是老師</div>
  </label>
  <p>單選列表項</p>
  <label class="toggle clearfix">
    <input type="radio" checked style="display: none;" name="sex">
    <div class="track-radio">
      <div class="handle"></div>
    </div>
    <div class="labelTxt">姓別：男</div>
  </label>
  <label class="toggle clearfix">
    <input type="radio" style="display: none;" name="sex">
    <div class="track-radio">
      <div class="handle"></div>
    </div>
    <div class="labelTxt">姓別：女</div>
  </label>
</div>
<script>
var aspan = document.querySelector('.box').querySelectorAll('span');
var color = ["#ef473a", "#f90", "#0c63ee", "#505050"];
var classArray = ["red", "yellow", "blue", "dark"]
for (var i = 0; i < aspan.length; i += 1) {
  aspan[i].index = i;
  aspan[i].style.background = color[i];
  aspan[i].onclick = function() {
    var label = document.querySelectorAll('label');
    for (var i = 0; i < label.length; i += 1) {
      var className = label[i].className.substring(0, 15);
      switch (this.index) {
        case 0:
          label[i].className = className + " " + classArray[0]
          break;
        case 1:
          label[i].className = className + " " + classArray[1]
          break;
        case 2:
          label[i].className = className + " " + classArray[2]
          break;
        case 3:
          label[i].className = className + " " + classArray[3]
          break;
      }
    }
  }
}
</script>
</body>
</html>

單選按鈕和核取方塊
2018-09-07
CSS3 checkbox核取方塊和radio單選框美化效果
2018-07-20
CSSS3
判斷核取方塊和單選按鈕程式碼
2017-03-29
checkbox核取方塊美化程式碼例項
2017-04-04
bootstrap22-內聯的核取方塊和單選按鈕的例項
2017-11-12
boot
JavaScript操作文字框、單選按鈕、下拉框、核取方塊
2017-09-13
JavaScript
直播系統原始碼，單選按鈕和核取方塊
2023-10-12
原始碼
單選按鈕美化效果程式碼
2017-04-11
CSS3核取方塊打勾美化效果
2017-05-13
CSSS3
css3實現的checkbox核取方塊美化程式碼例項
2017-02-20
CSSS3
css3實現button按鈕美化效果程式碼例項
2017-04-02
CSSS3
核取方塊全選和全不選程式碼例項
2017-03-10
模擬美化checkbox核取方塊程式碼例項
2017-04-07
UX設計之——核取方塊和開關按鈕
2016-06-25
UX
css3自定義checkbox核取方塊打勾效果程式碼例項
2017-03-13
CSSS3
10個HTML5美化版核取方塊和單選框
2015-04-02
HTML
WPS文字技巧：如何插入單選按鈕和核取方塊
2016-10-15
jQuery核取方塊全選和全不選效果程式碼
2017-04-19
jQuery
checkbox核取方塊全選和取消全選例項程式碼
2017-03-04
CSS3 radio單選按鈕美化效果
2018-02-13
CSSS3
css3美化checkbox核取方塊
2018-06-05
CSSS3
jQuery獲取選中的核取方塊或者單按鈕的值
2017-04-18
jQuery
點選文字框彈出可供選擇的checkbox核取方塊程式碼例項
2017-03-18
jQuery獲取選中核取方塊的值程式碼例項
2017-03-12
jQuery
css點選附近文字選中核取方塊程式碼例項
2017-04-12
CSS
純CSS模擬單選框和核取方塊
2017-06-10
CSS
獲取選中checkbox核取方塊的值程式碼例項
2017-03-19
css3實現的開關按鈕程式碼例項
2017-03-03
CSSS3
radio單選按鈕美化效果
2018-02-08
jQuery核取方塊全選和全不選效果
2017-10-24
jQuery
javascript核取方塊全選和反選效果
2017-04-05
JavaScript
Bootstrap系列 -- 17. 核取方塊checkbox和單選擇按鈕radio
2015-06-24
boot
javascript開關按鈕程式碼例項
2017-04-05
JavaScript
點選按鈕複製文字框文字程式碼例項
2017-04-14
js核取方塊全選和取消全選效果
2017-05-08
JS
JavaScript 核取方塊全選和取消全選效果
2017-05-08
JavaScript
CSS3 美化radio單選按鈕
2019-02-01
CSSS3
通過核取方塊控制按鈕是否可用
2017-03-24

css3單選框、核取方塊和開關按鈕美化效果程式碼例項

相關文章