更改微信小程序的组件默认样式

  • checkbox   

  /*checkbox 整体大小  */
  .checkbox {
      width: 12%;
      /* height: 240rpx; */
  }
  /*checkbox 选项框大小  */
  checkbox .wx-checkbox-input {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
  }
  /*checkbox选中后样式  */
  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
      border: none;
      background: #FF8383;
  }
  /*checkbox选中后图标样式  */
  checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
      width: 30rpx;
      height: 30rpx;
      line-height: 30rpx;
      text-align: center;
      font-size: 22rpx;
      color: #fff;
      background: transparent;
      transform: translate(-50%, -50%) scale(1);
      -webkit-transform: translate(-50%, -50%) scale(1);
  }
  • button

  /* button 重置样式 */
  button {
      padding: 0;
      background: none;
      border-radius: 0;
  }
  button::after {
      border: none;
  }
  /** 按钮的默认样式:必须“提升指定样式规则的应用优先权(!important)。” **/
  button[disabled] {
      color: #fff !important;
      background: linear-gradient(-12deg, rgba(47, 30, 136, .3) 0%, rgba(205, 3, 128, 0.3) 100%) !important;
  }
 
posted @ 2019-11-01 16:14  mei1234!  阅读(1354)  评论(0编辑  收藏  举报