uniapp 修改radio/checkbox（单选框/复选项）样式大小

爱被打了一巴掌 2021-09-13 15:42 3816阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xpdmVy_size_16_color_FFFFFF_t_70][]

以Colorui-Uniapp表单页面修改例子！在标签使用`transform:scale(0.7);` 即可完美解决问题 ！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xpdmVy_size_16_color_FFFFFF_t_70 1][]

## [css3的transform中scale缩放的使用方法][css3_transform_scale] ##

从3个方面介绍：

1、scale(x,y) 对元素进行缩放

X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数  
Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。  
transform:scale(2,2.5);

（上文的`transform:scale(0.7)即transform:scale(0.7,0.7)；）`  
   
2、scaleX(<number>) 元素只在X轴（水平方向）缩放元素。  
默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点  
transform:scaleX(2);    
   
3、scaleY(<number>) 元素只在Y轴（垂直方向）缩放元素。  
基点一样在元素的中心位置。可以通过transform-origin来改变基点。  
transform:scaleY(2);

文章参考自

《uniapp—修改radio组件的大小\_thinkingw770s的博客-CSDN博客》  
https://blog.csdn.net/thinkingw770s/article/details/89922456

《css3的transform中scale缩放的使用方法 - DIVCSS5》  
http://www.divcss5.com/css3-style/c50137.shtml

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xpdmVy_size_16_color_FFFFFF_t_70]: /images/20210913/df16d362a7a94f3781eb46f1aa8a668e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xpdmVy_size_16_color_FFFFFF_t_70 1]: /images/20210913/c51f5513dfd14d34921eeeb8b5187359.png
[css3_transform_scale]: http://www.divcss5.com/css3-style/c50137.shtml