input checkbox css样式修改

最新推荐文章于 2024-05-07 09:22:09 发布

上晴下雪

最新推荐文章于 2024-05-07 09:22:09 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/xueerkeji/article/details/106582907

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>
    <header>

    </header>
    <body>
        <style>
            input[type=checkbox]{
                width: 15px;
                height: 15px;
                visibility:hidden;
                margin-right:10px;
            }
            input[type=checkbox]:after
            {
                /**霸占所有input**/
                width: 100%;
                height: 100%;
                /**空格字符串填充**/
                content: " ";
                background-color:#5677FC;
                /**
                    display常和属性
                    inline:元素变成行内元素（不占行，不能修改height,width），
                    block:元素变成块级元素(占行，可修改height,width)
                    inline-block:行级元素的块级元素(不占行，可修改height,width);
                **/
                display: inline-block;
                /**
                    visibility可见性属性
                    visible:元素可见;
                    hidden:元素不可见;
                **/
                visibility: visible;
                border-radius: 2px;
                margin-top: 2px;

        
            }

            /**选中后的样式**/
            input[type=checkbox]:checked:after {
                /**详性 请谷歌，（唉，现在只能百度了）HTML特殊字符大全（unicode字符集）**/
                content: "\2713";/*UNICODE中对号*/

                font-weight: bold;
                color: #fff;
            }
        </style>
        <input type="checkbox">
    </body>
</html>

input checkbox 讲完了，其它的同理，这个不是所有浏览器都兼容

上晴下雪

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
input checkbox css样式修改

<html> <header> </header> <body> <style> input[type=checkbox]{ width: 15px; height: 15px; visibility:hidden; margin-right:10px;.
复制链接

扫一扫

专栏目录