WeChat アプレットのチェックボックスのスタイルを変更するにはどうすればよいですか?

  主に〜 までのチェックボックスのスタイルと 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);
}

おすすめ

転載: blog.csdn.net/dark_cy/article/details/126869762