给checkbox添加选中时的背景图片

先记录下,以后再研究

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Page Not Found</title>

        <style>
            #ckbox:checked:after{
    opacity: 1;
}
#ckbox:after{
    position: absolute;
    content: "";
    width: 14px;
    height: 13px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAYAAAHTUwwfAAAAAXNSR0IArs4c6QAABBxJREFUSA2tVm1olWUYvs5xSxe0/M6VikmBik5oDQwJNKgfWRthQspkDD+imZqWOA1TjNBK0fxCVCQ/Ek3UlCWoIPpDmTDLD0pIRfzYdDJlOzq1djx31/U+O+953+1sc9kN9/veH9d9X8/zvM/znAMExMyqfZfOA6qBWmNbd5mNGW/BbL7vpDU8uB7212X1KfFQstLCFbT7DQmfJYnku4vXZtF3qUolvaD6U1pt6bU120vMiy1ADJZ4XWhEW2QXL9vcFMvSGlRQJze1c9xmDz2AlUxPBtyb0/C7saqzVZ5xifcnpB8pQZJdflVHDBbetvJDZlNmeV0y2ismKkJMAu9NcNBXXtY7/dAcglmzr6zmtpuHVv0WbbOFXp7Gz3bkuEveu5+g720kvh/bzPmpIgYoYvckQqcfrWv47Evg0hUXfTYLeOCWFu++DZSW1EYikV4umebJJkeoCSssckyNjRoBK59C2OB1ai11zRO3Ibg31Wz8VLPzF2St8yfbVhchUfwpcOcu8Hw28NP62pY7slkH1hzFiVOuSLlt6/QNC5rBwi6LBonNPz37fpX3p1BtDlUojJsEPOSnyeoC7N4MfhavJspcngCUy0E++n/gl4OuSAkWUYboIdFerUThRGBE3kBV09d3a0QiMRibttOklM3U8xjJLsiQaOeYv4E1iv3bDNFoBAVF3No8fz26AVvW+kN0Za7wOqpu9sXHnydjwGu5wG/nnF++Q+8+ZKtJAYAoA/3wUs4qCNCV30iSLPp+kbztzYsU9IUjztGwTUuuIzS9TF7qrvCRrRgEX1RFk2S2Avv/wyQcTW1IMgfel2jntLlxOjocNtzPmgL8fh5YsCRVnvMCsHGF/Jvt3nGpqtYtEvVnlizIxrK13GEnwuC33kz6FU9NSDLt4pWoixlK5wCxe8nmQCY/5Q/fAP37KraCu2j2f15SEmmwJ6n5OHwMWLWBZkCGDgaWLtBJe0x9g2SVyoZmyCZ9GNMVVEOAgGmFuDwmKqidMO9rLqZ/Qh1+xlTgnVGyT1NFFpcj0aWRS41RDQ0N1ai9W8V4XD6lnBq69OkvZ74S16sy8EFxJESW/RyP33prIptFovwgmQh1Z+hI90bRJ0BdvWJOenQHvigFhnkXk5ZGRB9SB2DHHnjqkO45aiTx02THqLkkuuoS4acINzE0CafPAktWAo/+DiPkDXqVN9yMOLp1BabNzcCN6jBmcZm7n4ADJCoMJ8Oet2lIyo7YTR2OeNywZWcE+3gHtyc6X2u+NXR+Rn3GkmxveyUeYRBE8jH0f6T2RD23+nL+ACYvySBwHH+mij9S5AZ1GMnqgukO2yTWcs+l/kM1u3LVbPVGsw1bzepj+kMgWd3Rxi1mmK4BG2cyrunoytCNrivsEGf15Lc7CyT/AmwZindhHy8rAAAAAElFTkSuQmCC) no-repeat;
    background-size: cover;
    background-position: 0 -1px;
    opacity: 0;
}

    </style>
    </head>
    <body>
        <input type="checkbox" id="ckbox" />
    </body>
</html>
posted @ 2020-01-13 18:02  _DC  阅读(1364)  评论(0编辑  收藏  举报