给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>