主に〜 までのチェックボックスのスタイルと 3 つのクラス名を設定し.wx-checkbox-input
ます.wx-checkbox-input-checked
。.wx-checkbox-input-checked::before
.wx-checkbox-input
ボックスが選択されていないときにボックスのスタイルを設定するために使用されます。
checkbox .wx-checkbox-input {
width: 32rpx;
height: 32rpx;
border-color: #409eff;
background-color: transparent;
transition: background-color .2s;
}
.wx-checkbox-input-checked
選択したボックスのスタイルを設定するために使用されますが、元のスタイルをカバーするには.wx-checkbox-input
クラスと組み合わせて記述する必要があり、そうしないと重みが十分ではありません。
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #fff; /* 这里也可以设置对钩的颜色 */
background-color: #409eff;
}
.wx-checkbox-input-checked::before
これは、選択後のチェックマークのスタイルを設定するために使用され、.wx-checkbox-input
クラスと組み合わせて記述する必要があります。
checkbox .wx-checkbox-input {
/* content: ""; */ /* 不想显示对钩可以将 content 置空 */
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
color: #fff;
font-size: 32rpx;
text-align: center;
background-color: transparent;
transform: translate(-50%, -50%) scale(1);
}