css 控制checkbox 的背景和鼠标事件

最新推荐文章于 2023-03-02 00:36:20 发布

weixin_34292959

最新推荐文章于 2023-03-02 00:36:20 发布

阅读量274

点赞数

文章标签： python

原文链接：https://my.oschina.net/lvhuizhenblog/blog/341728

版权

2019独角兽企业重金招聘Python工程师标准>>>

<html>
<head>
<style type="text/css">
    body
    {
        margin:0;
        padding:0;
    }
    
    input[type="checkbox"]
    {
        visibility:hidden;
        width:0;
        height:0;
        margin:0;
        padding:0;
        float:left;
    }
    
    input[type=checkbox]+label 
    {
        display: block;
        width:14px;
        height: 14px;
        background:url(./check_box.png) no-repeat;
        cursor: pointer;    
        margin-right: 7px;
        float:left;
    }
    
    span.labeltext
    {
        float:left;
        font-family: "Microsoft YaHei";
        font-size: 12px;
        color: #4e4e4e !important;
        margin-right: 19px;
    }
    
    input[type=checkbox]+label:hover
    {
        background:url(./check_box.png) 70px 0;
    }
    
    input[type=checkbox]:checked+label 
    {
        background:url(./check_box.png) 56px 0;
    }
    
    
    input[type=checkbox]:checked+label:hover
    {
        background:url(./check_box.png) 42px 0;
    }
</style>
</head>

<body>

    <input type="checkbox" id="critical"/>
    <label for="critical"></label>
    <span class="labeltext">严重</span>
            
    <input type="checkbox" id="important"/>
    <label for="important"></label>
    <span class="labeltext">重要</span>
    
    <input type="checkbox" id="normal"/>
    <label for="normal"></label>
    <span class="labeltext">一般</span>
</body>
</html>

结构样式如下：