Maison >interface Web >tutoriel CSS >Un moyen simple d'embellir les cases à cocher, les boutons radio et les boutons coulissants avec du code CSS pur
Un moyen simple d'embellir les cases à cocher, les boutons radio et les boutons coulissants avec du code CSS pur
- 小云云original
- 2017-12-13 15:46:232936parcourir
我们知道css可以美化前端页面，本文我们就和大家分享纯Css代码美化checkbox复选框、radios单选框和滑动按钮的简单方法，希望能帮助到大家。
效果预览
1. 复选框
<html>
<head>
<style type="text/css">
.switch {
margin: 20px 20px 0 0;
display: flex;
align-items: center;
width: auto;
}
.checkbox-input {
display: none
}
.checkbox {
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
background-color: #fff;
border: 1px solid #d7d7d7;
border-radius: 3px;
width: 16px;
height: 16px;
vertical-align:middle;
margin: 0 5px;
}
.checkbox-input:checked+.checkbox {
background-color: #57ad68;
}
.checkbox-input:checked+.checkbox:after {
content: "\2714";
display: inline-block;
height: 100%;
width: 100%;
color: #fff;
text-align: center;
line-height: 16px;
font-size: 12px;
box-shadow: 0 0 4px #57ad68;
}
</style>
</head>
<body>
<label class="switch">
<input class="checkbox-input" id="checkbox" type="checkbox" name="demo-checkbox1">
<label class="checkbox" for="checkbox"></label>
<span>Hello</span>
</label>
</body>
</html>
2. 单选框
<html>
<head>
<style type="text/css">
.switch {
display: flex;
align-items: center;
width: auto;
float: left;
}
.radio-beauty-container .radio-beauty {
width: 16px;
height: 16px;
box-sizing: border-box;
display: inline-block;
border: 1px solid #d7d7d7;
margin: 0 5px;
border-radius: 50%;
transition: 0.2s;
}
.radio-beauty-container input[type="radio"]:checked+.radio-beauty {
border: solid 1px green;
padding: 3px;
background-color: green;
background-clip: content-box;
box-shadow: inset 0 0 1px rgba(0,128,0, 0.2), 0 0 3px green;
}
</style>
</head>
<body>
<p class="radio-beauty-container">
<label class="switch">
<span class="radio-name">radio2</span>
<input type="radio" name="radioName" id="radioName2" hidden/>
<label for="radioName2" class="radio-beauty"></label>
</label>
<label class="switch">
<span class="radio-name">radio3</span>
<input type="radio" name="radioName" id="radioName3" hidden/>
<label for="radioName3" class="radio-beauty"></label>
</label>
</p>
</body>
</html>
3. 滑动按钮
<html>
<head>
<style type="text/css">
.switch-slide-label {
display: block;
width: 34px;
height: 18px;
background: #ccc;
border-radius: 30px;
cursor: pointer;
position: relative;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.switch-slide-label:after {
content: '';
display: block;
width: 16px;
height: 16px;
border-radius: 100%;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
position: absolute;
left: 1px;
top: 1px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition:0.3s ease;
transition:0.3s ease;
}
.switch-slide input:checked+label {
background: #34bf49;
transition: 0.3s ease;
}
.switch-slide input:checked+label:after {
left: 17px;
}
</style>
</head>
<body>
<p class="radio-beauty-container">
<label class="switch-slide">
<input type="checkbox" id="menu-right" hidden>
<label for="menu-right" class="switch-slide-label"></label>
</label>
</p>
</body>
</html>
最简洁的代码美化复选框、单选框和滑动按钮
效果预览
1. 复选框
<html>
<head>
<style type="text/css">
.switch {
margin: 20px 20px 0 0;
display: flex;
align-items: center;
width: auto;
}
.checkbox-input {
display: none
}
.checkbox {
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
background-color: #fff;
border: 1px solid #d7d7d7;
border-radius: 3px;
width: 16px;
height: 16px;
vertical-align:middle;
margin: 0 5px;
}
.checkbox-input:checked+.checkbox {
background-color: #57ad68;
}
.checkbox-input:checked+.checkbox:after {
content: "\2714";
display: inline-block;
height: 100%;
width: 100%;
color: #fff;
text-align: center;
line-height: 16px;
font-size: 12px;
box-shadow: 0 0 4px #57ad68;
}
</style>
</head>
<body>
<label class="switch">
<input class="checkbox-input" id="checkbox" type="checkbox" name="demo-checkbox1">
<label class="checkbox" for="checkbox"></label>
<span>Hello</span>
</label>
</body>
</html>
2. 单选框
<html>
<head>
<style type="text/css">
.switch {
display: flex;
align-items: center;
width: auto;
float: left;
}
.radio-beauty-container .radio-beauty {
width: 16px;
height: 16px;
box-sizing: border-box;
display: inline-block;
border: 1px solid #d7d7d7;
margin: 0 5px;
border-radius: 50%;
transition: 0.2s;
}
.radio-beauty-container input[type="radio"]:checked+.radio-beauty {
border: solid 1px green;
padding: 3px;
background-color: green;
background-clip: content-box;
box-shadow: inset 0 0 1px rgba(0,128,0, 0.2), 0 0 3px green;
}
</style>
</head>
<body>
<p class="radio-beauty-container">
<label class="switch">
<span class="radio-name">radio2</span>
<input type="radio" name="radioName" id="radioName2" hidden/>
<label for="radioName2" class="radio-beauty"></label>
</label>
<label class="switch">
<span class="radio-name">radio3</span>
<input type="radio" name="radioName" id="radioName3" hidden/>
<label for="radioName3" class="radio-beauty"></label>
</label>
</p>
</body>
</html>
3. 滑动按钮
<html>
<head>
<style type="text/css">
.switch-slide-label {
display: block;
width: 34px;
height: 18px;
background: #ccc;
border-radius: 30px;
cursor: pointer;
position: relative;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.switch-slide-label:after {
content: '';
display: block;
width: 16px;
height: 16px;
border-radius: 100%;
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
position: absolute;
left: 1px;
top: 1px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition:0.3s ease;
transition:0.3s ease;
}
.switch-slide input:checked+label {
background: #34bf49;
transition: 0.3s ease;
}
.switch-slide input:checked+label:after {
left: 17px;
}
</style>
</head>
<body>
<p class="radio-beauty-container">
<label class="switch-slide">
<input type="checkbox" id="menu-right" hidden>
<label for="menu-right" class="switch-slide-label"></label>
</label>
</p>
</body>
</html>
相关推荐：
HTML页面中的的美化checkbox_html/css_WEB-ITnose
使用jquery与图片美化checkbox和radio控件的代码(打包下载)_jquery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode CSS pour obtenir une disposition horizontale parfaite des albums photoArticle suivant：Méthode CSS pour obtenir une disposition horizontale parfaite des albums photo