如何不使用transform:scale修改checkbox宽度？直接设置width为什么不生效

原生<input type="checkbox">是浏览器内置的替换元素，默认受浏览器自带的用户代理（UA）样式控制，绝大多数主流浏览器都对checkbox、radio这类表单控件的默认外观做了锁定，直接设置width、height不会生效，本质是UA样式内置的appearance属性限制了自定义样式的能力。

• 方案1：完全自定义样式（可精准控制宽高、外观）
  先清除浏览器默认的控件样式锁，再自定义所有外观属性，设置的width就会生效：

#myCheckBox {
  /* 清除不同浏览器的原生控件默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 自定义宽高，这里只改宽度也可以，高度保留默认值或者自己指定 */
  width: 50px;
  height: 18px;
  /* 基础边框、背景，不然清除默认样式后控件会透明不可见 */
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  background: #ffffff;
  cursor: pointer;
}

/* 自定义选中状态的样式 */
#myCheckBox:checked {
  background-color: #1890ff;
  border-color: #1890ff;
  position: relative;
}

#myCheckBox:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 18px;
  width: 10px;
  height: 8px;
  border: 2px solid #ffffff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

• 方案2：不想重写样式的轻量方案
  如果不需要完全自定义外观，只想单独拉宽宽度，可以用scaleX单独横向缩放，不会改变高度，也不用重写选中态：

#myCheckBox {
  /* 数值越大宽度越宽，按你的需求调整 */
  transform: scaleX(2);
  /* 设置缩放原点，避免控件偏移出原本的布局位置 */
  transform-origin: left center;
}

内容的提问来源于stack exchange，提问作者Zyfella