uni-app 自定义 checkbox 选中后的样式

秒速五厘米 2023-01-09 15:34 272阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]  
重点在 css 样式上，结构引用的 [uni-app官网结构][uni-app]

/* 复选框未选中前的样式 */
    /deep/ .uni-checkbox-input { 
    	width: 36upx;
    	height: 36upx;
    	border-radius: 50%;
    	margin-right: 0;
    }
    
    /* 复选框取消默认样式 */
    /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before { 
        font: normal normal normal 14px/1 uni;
        content: "\EA08";
        font-size: 0; /* 重点使用这一步取消的默认样式 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-48%) scale(.73);
        -webkit-transform: translate(-50%,-48%) scale(.73);
    }
    
    /* 重新定义复选框选中后的样式*/
    /deep/ .uni-checkbox-input-checked::before { 
    	width: 20upx;
    	height: 20upx;
    	/* background: #007aff; */
    	/* border-radius: 50%; */
    	background: url(../../../static/img/seal.png) no-repeat center;
    }

这样就ok了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwMDQxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/456cebf82c934ddf9a6e5da96a21738d.png
[uni-app]: https://uniapp.dcloud.io/component/checkbox

发表评论取消回复

表情：

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

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

相关阅读

相关自定义文本选中样式

默认情况下，我们在网页上选中文字的时候，会给选中的部分一个深蓝色背景颜色(可以自己拿起鼠标试试)，如果我们想自己定制被选中的部分的样式呢？ // 注意只能修改这两个属性字体

谁践踏了优雅/ 2023年07月18日 15:28/ 0 赞/ 50 阅读

相关自定义radio/checkbox样式

HTML: <div class="form-item"> <div class="form-item-inline"> <i

约定不等于承诺〃/ 2023年06月06日 14:26/ 0 赞/ 1 阅读

相关 uniapp之自定义顶部样式

> 当我们在实际项目过程中，有些时候的ui设计图顶部的显示不是原生的样子，这时候就需要自定义了 ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

叁歲伎倆/ 2023年01月22日 03:59/ 0 赞/ 51 阅读

相关 uni-app 自定义 checkbox 选中后的样式

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

秒速五厘米/ 2023年01月09日 15:34/ 0 赞/ 273 阅读

相关 android自定义radiobutton、checkbox样式

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

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

相关 android中checkbox自定义样式

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

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

相关自定义CheckBox样式

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

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

相关 CSS自定义checkbox样式

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

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

相关 android自定义radiobutton、checkbox样式

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

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

相关 CheckBox 自定义背景样式

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

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