Lable+input 單選標籤的單擊事件執行兩次

最新推荐文章于 2025-02-16 17:16:37 发布

原创最新推荐文章于 2025-02-16 17:16:37 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox

HTML5 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了ipt-checkbox的CSS样式定制方法，包括隐藏输入框并使用伪元素实现自定义图标显示。同时，文章指出ipt-checkbox点击事件触发两次的问题，并提供了检查时的DOM节点名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ipt-checkbox input[type="checkbox"]{
    display: none;
}
.ipt-checkbox input[type="checkbox"]+label {
    display: inline-block;  
    text-align: left;
    -webkit-box-sizing: border-box;
}

.ipt-checkbox label::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;  
    vertical-align: middle; 
    margin-right: 5px;
    -webkit-box-sizing:border-box;
    border-width: 1px;
   border-style:inset; 
   border-color: #ddd; 
}

.ipt-checkbox input[type="checkbox"]:checked+label::before{
    background-color: #38c;
    border-color: #38c;
    color: #fff;
    text-shadow: 0 1px 0 #059;
    background-image: url(../lximage/check-white.png);
    background-position:center,center;
    background-repeat:no-repeat;
}