css实现checkbox美化
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS Styled Checkboxes</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Text&display=swap');
html {
font-size: 62.5%;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.6rem;
}
/* ALL TOGGLES */
.toggle {
height: 4rem;
}
.toggle input[type=checkbox] {
display: none;
}
.toggle span {
/* space between label and toggle */
padding-left: .5rem;
}
.toggle label span::before,
.toggle label span::after {
position: absolute;
}
.toggle label span::before {
/* off label text */
content: 'OFF';
}
.toggle input[type=checkbox]:checked + label span::before {
/* on label text */
content: 'ON';
}
/* STYLE 1 */
.style1 label {
color: #cccfcd;
display: block;
text-transform: uppercase;
font-size: 2rem;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0