html使用css修改 单选框和多选框的 选择框的样式 大小尺寸

可以使用 CSS 来修改单选框和多选框的选择框样式和大小尺寸。下面是两种常见的方法：

1. 使用伪元素来创建自定义的选择框，并将原生的选择框隐藏起来。示例代码如下：

   <label>
     <input type="checkbox">
     <span class="checkbox"></span>
     Checkbox
   </label>

   /* 隐藏原生选择框 */
   input[type="checkbox"] {
     display: none;
   }

   /* 创建自定义选择框 */
   .checkbox {
     display: inline-block;
     width: 20px;
     height: 20px;
     border: 1px solid #ccc;
     border-radius: 3px;
     background-color: #fff;
     cursor: pointer;
   }

   /* 当选择框被选中时，修改其背景色 */
   input[type="checkbox"]:checked + .checkbox {
     background-color: #f00;
   }

2. 修改原生选择框的样式和大小尺寸。示例代码如下：

   <label>
     <input type="checkbox" class="checkbox">
     Checkbox
   </label>

   /* 修改原生选择框的样式和大小尺寸 */
   .checkbox {
     width: 20px;
     height: 20px;
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     border: 1px solid #ccc;
     border-radius: 3px;
     background-color: #fff;
     cursor: pointer;
   }

   /* 当选择框被选中时，修改其背景色 */
   .checkbox:checked {
     background-color: #f00;
   }

以上两种方法都可以实现自定义选择框的样式和大小尺寸，根据实际需求选择其中一种即可。