如何通过CSS增大webkit内核中resizer调整控件的尺寸

::webkit-resizer 伪元素的尺寸不受 font-size 属性控制，你修改背景色生效是因为该选择器确实匹配到了对应控件，但控件大小是由浏览器默认的边框/尺寸属性控制的，所以修改字号不生效。

可生效的修改方案 #

• 方案1：通过边框属性放大默认斜角样式的resizer

::webkit-resizer {
  /* 调整border-width数值即可控制控件大小，数值越大控件越大 */
  border: 10px solid transparent;
  /* 调整颜色值即可修改resizer的显示颜色 */
  border-right-color: #555;
  border-bottom-color: #555;
}

• 方案2：自定义resizer的样式，完全替换默认外观

::webkit-resizer {
  /* 直接指定宽高控制尺寸 */
  width: 22px;
  height: 22px;
  appearance: none;
  /* 自定义背景样式，也可以用background-image设置图标 */
  background-color: #666;
  /* 可选：加圆角 */
  border-radius: 3px 0 0 0;
}

上述方案仅适配WebKit内核浏览器（Chrome、Edge、Safari等），Firefox暂不支持通过CSS原生修改resizer控件尺寸，如需全兼容可以通过JS实现自定义拖拽调整功能替代原生控件。

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