修改复选框的选中并禁用的样式

前端_yu小白

于 2025-06-20 18:33:14 发布

阅读量192

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 经验分享 CSS 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_48795482/article/details/148797574

经验分享同时被 3 个专栏收录

37 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

一、样式对比

修改之前：

修改之后：

修改前选中禁用的状态比较暗，不容易看清。修改完之后样式更明显。

二、解决思路

<input type="checkbox" :checked="ques.answer === item.value" disabled /> {{ item.label }}.{{ item.value }}

input[type="checkbox"] {
     width: 12px;
     height: 12px;
     display: inline-block;
     text-align: center;
     vertical-align: middle;
     line-height: 12px;
     position: relative;
 }
  
 input[type="checkbox"]::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     background: #fff;
     width: 100%;
     height: 100%;
     border: 1px solid #CACDCF
}
  
input[type="checkbox"]:checked::before {
    content: "\2713";
    background-color: #2196F3;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #2196F3;
    font-size: 12px;
    font-weight: bold;
}

通过伪元素设置定位，覆盖掉之前的默认样式。