使用伪类元素对checkbox样式进行修改
边框样式在before中修改,"\2713"为字符表勾选字符
input[type="checkbox"
] {
width
:
20px
;
height
:
20px
;
display
: inline-
block
;
text-align
:
center
;
vertical-align
:
middle
;
line-height
:
18px
;
margin-right
:
10px
;
position
:
relative
;
}
input[type=
"checkbox"
]::before {
content
:
""
;
position
:
absolute
;
top
:
0
;
left
:
0
;
background
:
#fff
;
width
:
100%
;
height
:
100%
;
border
:
1px
solid
#d9d9d9
;
border-radius:
4px
;
}
input[type=
"checkbox"
]:checked::before {
content
:
"\2713"
;
background-color
:
#fff
;
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
border
:
1px
solid
#7D7D7D
;
border-radius:
4px
;
color
:
#7D7D7D
;
font-size
:
20px
;
font-weight
:
bold
;
}