bootstrap重新设计checkbox样式

最新推荐文章于 2024-08-16 08:38:15 发布

岁月如歌_

最新推荐文章于 2024-08-16 08:38:15 发布

阅读量5.2k

点赞数

本文链接：https://blog.csdn.net/namechenfl/article/details/83268671

版权

代码如下：

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
</head>
<style>
    .checkbox-custom {
    position: relative;
    padding: 0 15px 0 25px;
    margin-bottom: 7px;
    margin-top: 0;
    display: inline-block;
}
/*
将初始的checkbox的样式改变
*/
.checkbox-custom input[type="checkbox"] {
    opacity: 0;/*将初始的checkbox隐藏起来*/
    position: absolute;
    cursor: pointer;
    z-index: 2;
    margin: -6px 0 0 0;
    top: 50%;
    left: 3px;
}
/*
设计新的checkbox，位置
*/
.checkbox-custom label:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -9px;
    width: 19px;
    height: 18px;
    display: inline-block;
    border-radius: 2px;
    border: 1px solid #bbb;
    background: #fff;
}
/*
点击初始的checkbox，将新的checkbox关联起来
*/
.checkbox-custom input[type="checkbox"]:checked +label:after {
    position: absolute;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    content: "\e013";
    top: 42%;
    left: 3px;
    margin-top: -5px;
    font-size: 11px;
    line-height: 1;
    width: 16px;
    height: 16px;
    color: #333;
}
.checkbox-custom label {
    cursor: pointer;
    line-height: 1.2;
    font-weight: normal;/*改变了rememberme的字体*/
    margin-bottom: 0;
    text-align: left;
}
</style>
<body>
    <div class="col-sm-8 " style="margin:50px;">
        <div class="checkbox-custom checkbox-default">
            <input type="checkbox" id="RememberMe">
                <label for="RememberMe">Remember Me</label>
        </div>
        <div class="checkbox-custom checkbox-default">
                <input type="checkbox" id="RememberMe">
                    <label for="RememberMe">Remember Me</label>
            </div>
    </div>
</body>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
</html>

文件目录如下：