Question

我已经实现了一个基于CSS3的复选框，其中默认复选框将被隐藏，并且一些彩色的bg div将显示在它的顶部。问题是我需要这个＆＃34;检查＆＃34;页面加载时......

请帮助我。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
body { font-family:Verdana, Geneva, sans-serif; font-size:12px;}
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}    
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
} 
input.cmn-toggle-yes-no + label {
  padding: 2px;
  width: 70px;
  height: 30px;  
  color:#000;
}
input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after {
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  line-height: 24px;
  border-radius:4px;
   margin:0px 8px;
}
input.cmn-toggle-yes-no + label:before {
background-color: #dfdfdf;
border: 1px solid #d2d1d1;
color: #888;
content: attr(data-off);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
input.cmn-toggle-yes-no + label:after {
        background-color:#48BD7F;
  color:#fff;
  border:1px solid #2da063;
  content: attr(data-on);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
input.cmn-toggle-yes-no:checked + label:before {
-webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label:after {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}
.switch-toggle.alert-success {
    background-color:#fff;
    border:1px solid #b8b8b8;
    color: #333;
    -moz-box-shadow: inset 0 0 10px #cfcfcf;
    -webkit-box-shadow: inset 0 0 10px #cfcfcf;
    box-shadow: inset 0 0 10px #cfcfcf;
}
</style> </head>

<body>

 <div>
          <input type="checkbox" id="toggle-1" class="cmn-toggle cmn-toggle-yes-no">
          <label for="toggle-1" data-on="Yes" data-off="No"></label>
        </div>
</body>
</html>

Answer 1

将复选框标记为已选中。

<input type="checkbox" id="toggle-1" checked="checked" class="cmn-toggle cmn-toggle-yes-no">

如何将复选框设置为＆＃34; Checked＆＃34;默认情况下？

1 个答案: