[css][style][checkbox] checkbox组件样式需优化
发布于 7 年前 作者 tianjie 8625 次浏览 来自 问答

目前面临的主要问题

  1. checkbox的大小有点太大了,ms没法调整。

  2. checkbox 和它对应的文本没有严格垂直居中对齐,

请参照下图,用了flex layout, 文本是垂直居中的。 但是明显checkbox向下有偏移。

希望能改进下。

2 回复

/*  重写 checkbox 样式  */

checkbox .wx-checkbox-input {

  border-radius: 50%;

  width: 40rpx;

  height: 40rpx;

}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {

  border: none;

  background: red;

}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {

  border-radius: 50%;

  width: 40rpx;

  height: 40rpx;

  line-height: 40rpx;

  text-align: center;

  font-size:30rpx;

  color:#fff;

  background: transparent;

  transform:translate(-50%, -50%) scale(1);

  -webkit-transform:translate(-50%, -50%) scale(1);

}

的确太大了,求改小的方法

回到顶部