css3实现checkbox变按钮

最新推荐文章于 2022-08-20 14:37:02 发布

weixin_34216107

最新推荐文章于 2022-08-20 14:37:02 发布

阅读量305

点赞数

本文介绍如何使用 CSS3 技术将普通的 HTML checkbox 转换为美观的切换按钮。通过隐藏默认的 checkbox 并用自定义样式替代，实现了开关效果。文章详细展示了如何使用伪元素及过渡效果来增强用户体验。

html 如下

<!DOCTYPE HTML>
<html>
    <head>
        <title>css3实现checkbox变按钮 </title>
    </head>
<body>
    <div class='search_checkbox'>高级检索：
        <input type='checkbox' id= 'switch'>
        <label for='switch'>高级检索</label>
    </div>
</body>
</html>

　　css如下

.search_checkbox{
    margin: 0;
    padding: 0;
    margin-left: 15px;
    display: inline-block;
    height: 30px;
    padding-top: 12px;
}
.search_checkbox input[type=checkbox]{
    height: 0px;
    width: 0px;
    visibility: hidden;
}
.search_checkbox label{
    cursor: pointer;
    height: 20px;
    border-radius: 10px;
    display: inline-block;
    background-color: gray;
    width: 40px;
    text-indent: -99999px;
    position: relative;
}
.search_checkbox label::before {
    content: '';
    display:inline-block;
    background-color: white;
    height: 15px;
    width: 15px;
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    border-radius: 7px;
    transition:0.3s;
}
.search_checkbox input:checked + label {
  background: #bada55;
}
.search_checkbox input:checked + label:before {
  left: calc(100% - 2.5px);
  transform: translateX(-100%);
}
.search_checkbox label:active:before{
    width:20px;
}