修改input 元素默认样式

修改select 图标位置

• html

<select name="" id="">
    <option value="">1</option>
  </select>

• css

select {
  padding-right: 30px;
  background-image: url("./pullDownIcon.svg");
  background-position: right center;
  background-repeat: no-repeat;
  appearance: none;
}

修改checkbox 选中以后的背景色

  <input type="checkbox" class="checkbox">

input[type="checkbox"] {
  appearance: none; /* 移除默认样式 */
  width: 20px; /* 自定义复选框宽度 */
  height: 20px; /* 自定义复选框高度 */
  background-color: white; /* 默认背景色 */
  border-radius: 4px; /* 圆角 */
  border: 1px solid black; /* 边框 */
  position: relative; /* 相对定位 */
}

input[type="checkbox"]:checked {
  background-color: black; /* 选中时的背景色 */
}

input[type="checkbox"]:before {
  content: ''; /* 创建一个内容为空的伪元素 */
  position: absolute; /* 绝对定位 */
  top: 2px; /* 调整对号的位置 */
  left: 6px; /* 调整对号的位置 */
  width: 6px; /* 对号的宽度 */
  height: 12px; /* 对号的高度 */
  border: solid white; /* 对号的颜色 */
  border-width: 0 2px 2px 0; /* 对号的样式 */
  transform: rotate(45deg); /* 旋转45度 */
}