CSS：将div包装在复选框周围

我想在一个复选框周围装一个div.我这样做是因为我想用它来设置复选框的背景颜色.

我试过这个,但粉红色的div突出了复选框.

jsFiddle

#checkBox{ margin:0px; 
           padding:0px;
           opacity:0.5;}

#checkBox_wrapper{ background:pink;
                  float:left;}

Box_wrapper" >
      Box" id = "checkBox"/>

最佳答案

将line-height设置为0,默认字体大小将高度设置为20px.

jsFiddle

#checkBox_wrapper {
    background:pink;
    float:left;
    line-height:0;
}

PS酷技巧,我将来会用它;)

更新

这是另一种实现方式,不需要包装器或类.不幸的是只适用于IE9,Chrome和Safari. Apparently it’s against the CSS 2.1 spec.

jsFiddle

HTML

Box" />

CSS

input[type=checkBox] {
    position:relative;
}
input[type=checkBox]:before {
    content:"";
    display:block;
    background:pink;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:1;
    opacity:0.5;
}

原文地址：https://www.jb51.cc/css/427143.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。