修改单选框radio或复选框checkbox默认样式

最新推荐文章于 2022-12-09 16:54:08 发布

Ag_yangyx

最新推荐文章于 2022-12-09 16:54:08 发布

阅读量804

点赞数 1

分类专栏： css 文章标签： radio默认样式修改 checkbox默认样式修改纯css修改radio或checkbox默认样式引用背景图片修改radio或checkbox默认样式

本文链接：https://blog.csdn.net/qq_38528283/article/details/102481539

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

两种修改单选框radio或复选框checkbox默认样式的方法

html

<input type="checkbox" name="xxx"  value="xxxx" />

css引用图片修改其默认样式

css style

    <style>
     input[type='checkbox'] {
            -webkit-appearance: none;
            background: #fff url('/content/cms/images/weizhong.png');  /*未选中的样式*/
            background-size: cover;
            height: 16px;
            width: 16px;
            vertical-align: middle;
            border:none;
        }
        input[type='checkbox']:checked {
            background: #fff url('/content/cms/images/zhong.png');  /*选中的样式*/
            background-size: cover;
            border:none;
        }
    </style>

结果展示：
未选中

纯css修改其默认样式

css syle

input[type="checkbox"]{
            width:20px;
            height:20px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 18px;
            position: relative;
        }
        input[type="checkbox"]::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            width: 100%;
            height: 100%;
            border: 1px solid #d9d9d9;
        }
        input[type="checkbox"]:checked::before{
            content: "\2713";
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            width:100%;
            border: 1px solid #e50232;
            color:#e50232;
            font-size: 20px;
            font-weight: bold;
        }

结果展示：
未选中