uni-app开发微信小程序,checkbox、radio等原生组件样式设置问题解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app开发微信小程序,checkbox、radio等原生组件样式设置问题解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

它们是原生的组件，修改样式只能在app.vue里面修改，目前只知道这一种解决办法。如果你的UI给的图比较特殊，用css写比较困难，推荐使用图片代替，请看下面示例。

正确设置✔：在App.vue文件里设置

test.vue文件（这里假设你使用checkbox或者radio的组件）：

<template>
    <viewclass="custom-checkbox">
      	<checkbox-group>
	  <checkbox>
	    checkbox
	  </checkbox>
	</checkbox-group></view>
</template>

App.vue文件（这里设置）：

提示：不用引入样式，全局设置刷新直接生效.custom-checkbox用于包裹你的组件，只要哪里使用直接包裹就可以生效样式全局通用。

<style lang="scss">
.custom-checkbox {  // 使用一层类名包裹避免全局污染，下面开始设置选中前的你要样式//设置通用样式 
	.universal_sty {
		border: none;
		width: 42rpx;
		height: 39rpx;
		background-color: transparent;
		background-repeat: no-repeat;
		background-size: 100%;
	}
 
	//选中前的样式----------------------------------
	checkbox .wx-checkbox-input {
		background-image: url('./static/choice_no.png'); //替换为你要的图片样式
		@extend .universal_sty;
	}
 
	//选中前原本的图标样式-需要把它置空
	checkbox .wx-checkbox-input::before {
		font-size: 0rpx;
		background: transparent;
	}
 
	//选中后的样式---------------------------------
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background-image: url('./static/choice_much.png'); //替换为你要的图片样式
		@extend .universal_sty;
	}
 
	//选中后的图标样式，需要把它置空
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		font-size: 0rpx;
		background: transparent;
	}
}
 
</style>

自定义checkbox

在App.vue中写入样式：

    checkbox.red .wx-checkbox-input,
	checkbox.red .uni-checkbox-input {
	    background-image: url('/static/images/steps/drug_nosel.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-color: #00000000;
		width: 16px;
		height: 16px;
	}
	
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input{
		background-image: url('/static/images/steps/checkbox_checked.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #00000000;
		border-color: #00000000;
		width: 16px;
		height: 16px;
	}

自定义radio样式：

如果要全局改变radio的样式，需要将样式代码写在App.vue中，代码如下：文章来源地址https://www.toymoban.com/news/detail-826500.html

/* radio 未选中时的样式 */
	radio.info .wx-radio-input{
		border-color: #00000072;
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		background-clip: content-box!important;
		box-sizing: border-box;
	}
	/* radio 选中后的样式 */
	radio.info .wx-radio-input.wx-radio-input-checked{
		background-image: url('/static/images/steps/checkbox_checked.png');
		background-color: #00000000!important;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		border-color: #00000000!important;
		background-clip: content-box!important;
		box-sizing: content-box;
	}
	
	/* radio 选中后的图标样式*/
	radio.info .wx-radio-input.wx-radio-input-checked::before{
		display: none!important;
	}

到了这里，关于uni-app开发微信小程序,checkbox、radio等原生组件样式设置问题解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！