无需修改CSS如何让动态生成input按字符数设置宽度

以下两种方案均不需要修改原有第三方CSS，可直接生效：

1. HTML层面行内样式覆盖（最便捷） #

利用行内样式!important的最高优先级，直接覆盖第三方CSS的宽度规则：

• 方案A：恢复size属性的生效逻辑
  使用revert关键字撤销第三方设置的宽度规则，让size="4"的设置生效：

<input id="40" type="number" maxlength="4" size="4" value="0" style="width: revert !important;">

• 方案B：用字符单位精准控制宽度
  直接使用适配字符宽度的ch单位设置，效果比size属性更稳定，1ch约等于1个数字的宽度，兼容性也更好：

<input id="40" type="number" maxlength="4" value="0" style="width: 4.5ch !important;">

注：多设置0.5ch是为了预留数字输入框默认的上下调节箭头占位，避免输入内容被挤压

2. JS层面动态设置样式 #

如果input是JS动态生成的，可以在生成逻辑中直接注入样式：

const input = document.createElement('input');
input.id = '40';
input.type = 'number';
input.maxLength = 4;
input.size = 4;
input.value = 0;
// 新增以下任意一行样式即可
input.style.cssText = 'width: revert !important;';
// input.style.cssText = 'width: 4.5ch !important;';

// 后续插入DOM的逻辑...

如果input已经渲染到页面，可直接选中修改：

document.getElementById('40').style.cssText = 'width: 4.5ch !important;';

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