我实现了一个基于 CSS3 的复选框，其中默认复选框将被隐藏，一些彩色 bg div 将显示在它的顶部。问题是我需要在页面加载时将其作为“选中”...
请帮助我。
<!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>
最佳答案
将复选框标记为选中。
<input type="checkbox" id="toggle-1" checked="checked" class="cmn-toggle cmn-toggle-yes-no">
关于css - 如何让checkbox默认变成 "Checked"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24861196/