修改checkbox默认样式

微信小程序有提供css选择器供开发者编辑checkbox的样式,如下:

未选中的背景样式:wx-checkbox-input
选中后的背景样式:wx-checkbox-input.wx-checkbox-input-checked
选中后的勾子的样式:wx-checkbox-input.wx-checkbox-input-checked::before

原生的微信小程序中,组件checkbox复选框是正方形的,

未修改的checkbox

image.png

修改后的checkbox

image.png

//wxml

  • 在checkbox中绑定样式checkbox
<checkbox-group>
    <checkbox class="checkbox" value=""></checkbox>
</checkbox-group>

//wxss

  • wx-checkbox-input未选中的样式
  • wx-checkbox-input.wx-checkbox-input-checked选中后的样式
/* 还没点击选中的样式 */
.checkbox .wx-checkbox-input{
  border-radius: 50%;
}
/* 点击选中后的样式 */
.checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  color: white;
  background-color: #fd7a40;
  border-color: #fd7a40;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容