html checkBox自定义格式修改

Bertha 。 2022-01-15 18:13 406阅读 0赞

## css代码 ##

input[type=checkbox]{ 
                appearance: none;
                -moz-appearance: none;
                -ms-progress-appearance: none;
                -webkit-appearance: none;
                outline: none;
                display: inline-block;
                width: 16px ;
                height: 16px ;
            }
    
    input[type=checkbox]:checked{ 
                background: url("/images/login/checked@1x.png") no-repeat;     //替换图片
                background-position: center center;                            //图片位置
                background-size: contain;                                      //图片大小
                background-color: #2877ff;
            }

## 选中前后效果展示 ##

![在这里插入图片描述][20190613150356369.png] ![在这里插入图片描述][2019061315045176.png]

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[20190613150356369.png]: https://img-blog.csdnimg.cn/20190613150356369.png
[2019061315045176.png]: /images/20220115/a8216a4bb65d443d91ef4af32b4226a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220115/cbc422d78cd744e3933c4b6c1124d647.png

发表评论取消回复

表情：

评论列表（有 0 条评论，406人围观）

还没有评论，来说两句吧...

相关阅读

相关 android自定义radiobutton、checkbox样式

<CheckBox android:id="@+id/cbPayTypeDefault"

短命女/ 2022年08月27日 02:30/ 0 赞/ 224 阅读

相关 Html5--利用lable+CSS3实现自定义checkbox

问题：在用Html5做一个web APP的时候发现用浏览器自带的input checkbox不是很好看，就想着是否能做类似原生APP（Android&IOS的选择）

太过爱你忘了你带给我的痛/ 2022年08月05日 12:08/ 0 赞/ 127 阅读

相关 android中checkbox自定义样式

转载自：http://wsy1983wsy.iteye.com/blog/1471573 [android中checkbox自定义样式][android_chec

刺骨的言语ヽ痛彻心扉/ 2022年08月01日 13:54/ 0 赞/ 232 阅读

相关自定义CheckBox样式

一般的自定义checkbox样式要改style文件，比较麻烦。可以直接把`button`属性设置为`@null`，然后定义一个`selector`文件，在`background

古城微笑少年丶/ 2022年06月08日 00:08/ 0 赞/ 271 阅读

相关 CSS自定义checkbox样式

\[type=checkbox\]是过滤的意思，意思是说如果遇到type=checkbox的，就执行以下的样式。 input[type=checkbox],

小咪咪/ 2022年05月14日 04:55/ 0 赞/ 286 阅读

相关 android自定义radiobutton、checkbox样式

<CheckBox android:id="@+id/cbPayTypeDefault"

╰+哭是因爲堅強的太久メ/ 2022年04月13日 08:53/ 0 赞/ 397 阅读

相关 html自定义checkbox radio select —— checkbox radio篇

前些日子，所在公司项目的UI做了大改，前端全部改用 [Bootstrap][] 框架，Bootstrap的优缺点在此就不详述了，网上一大堆相关资料。前端的设计就交给我和另一

深藏阁楼爱情的钟/ 2022年03月18日 11:58/ 0 赞/ 310 阅读

相关 CheckBox 自定义背景样式

创建一个自定义的背景选择器 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="h

蔚落/ 2022年02月12日 19:13/ 0 赞/ 397 阅读

相关 html checkBox自定义格式修改

css代码 input[type=checkbox]{ appearance: none; -m

Bertha 。/ 2022年01月15日 18:13/ 0 赞/ 407 阅读

相关 WordPress返回文章修改日期,自定义日期格式

WordPress 用query\_posts()函数调用文章列表时.可以用$post->post\_modified返回文章的修改日期,$post->post\_date为文

旧城等待，/ 2021年09月26日 01:08/ 0 赞/ 396 阅读