<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;
}