input 勾选。 蓝色改为其他颜色

57 阅读1分钟

<input style="margin:0px" class="everyInput" type="checkbox" value="101081">


css

#hand_over_customer_modal  input[type="checkbox"]::before {
    content: "";
    display: inline-block;
    /* width: 13px; 设置勾选框的大小 */
    /* height: 12px;  */
    background-color: #fff; /* 设置勾选框的背景色为绿色 */
    /* border: 1px solid #ccc; 可选:设置勾选框的边框 */
    border-radius: 2px; /* 可选:设置勾选框的圆角 */
    margin-right: 5px; /* 可选:调整勾选框与文本之间的间距 */
}

#hand_over_customer_modal  input[type="checkbox"]:checked::before {
    content: "\2713"; /* Unicode 编码表示的勾选标记 */
    color: white; /* 勾选标记的颜色 */
    font-size: 10px; /* 勾选标记的大小 */
    line-height: 12px;
    background-color: #1ab394;
    padding-top: 2px;
    width: 12px;
    text-align: center;
    height: 12px;
    font-weight: bold;

}

上面的有一些问题。 对钩不是垂直居中。 更新样式 考虑定位的形式


.everyInput {
    margin-top: 0;
    margin-right: 10px ; 
    display: inline-block;
    position: relative;
}
#hand_over_customer_modal  input[type="checkbox"]::before {
    content: "";
    display: inline-block;
    background-color: #fff; /* 设置勾选框的背景色为绿色 */
    border-radius: 2px; /* 可选:设置勾选框的圆角 */
    margin-right: 5px; /* 可选:调整勾选框与文本之间的间距 */
}

#hand_over_customer_modal  input[type="checkbox"]:checked::before {
    content: "\2713"; 
    color: white; /* 勾选标记的颜色 */
    font-size: 10px; /* 勾选标记的大小 */
    line-height: 12px;
    background-color: #1ab394;
    /* padding-top: 2px; */
    vertical-align: middle;
    width: 13px;
    text-align: center;
    height: 13px;
    font-weight: bold;
    position: absolute;
    z-index: 1;

}