纯Css代码美化checkbox复选框、radios单选框和滑动按钮简单方法
css
我们知道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
以上是纯Css代码美化checkbox复选框、radios单选框和滑动按钮简单方法的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
<🎜>：死铁路 - 如何驯服狼
1 个月前
By DDD
R.E.P.O.的每个敌人和怪物的力量水平
1 个月前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：种植花园 - 完整的突变指南
2 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
vue中怎么用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
bootstrap怎么插入图片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。
bootstrap怎么写分割线
Apr 07, 2025 pm 03:12 PM
创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。
bootstrap怎么设置框架
Apr 07, 2025 pm 03:27 PM
要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
bootstrap怎么调整大小
Apr 07, 2025 pm 03:18 PM
要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-
bootstrap按钮怎么用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
