多选框点击添加背景图片/更改多选框样式

在这里插入图片描述
默认格式

在这里插入图片描述

加了样式

<!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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值