zoukankan      html  css  js  c++  java
  • 给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>
  • 相关阅读:
    Docker批量操作相关命令
    Jenkins上HTML报告不显示jmeter脚本执行失败结果
    ubantu18.04虚机不能远程登录
    CentOS7安装MongoDB-4.0
    CentOS7安装ElasticSearch-6.4.1
    极速安装Docker-Compose
    jenkins服务启动正常但是无法访问
    Docker中部署Jenkins
    鼠标右键失灵的解决方法
    Win10系统Edge浏览器怎么截取网页长图?
  • 原文地址:https://www.cnblogs.com/dch0/p/12188564.html
Copyright © 2011-2022 走看看