我可以使用CSS width = 6em;或width = 100%设置<input type=number>字段的宽度，但这些只能设置固定宽度或随容器而变化的宽度。我希望宽度取决于我输入的数字有多大。我确信我可以通过设置width = 100%并将<input>的值写入包含元素（以某种方式隐藏）来实现这一点。但是，有没有一种方法可以在没有JavaScript的情况下做到这一点？纯CSS？我可以使用绝对最新的尖端CSS功能。
width = 6em;
width = 100%
<input type=number>
<input>
u91tlkcl1#
不幸的是，目前纯CSS解决方案不可用。您可以使用等宽字体和内联事件处理程序，如下所示。但是，这并不适用于所有unicode字符。
input { font-family: 'Courier'; min-width: 1ch; width: 1ch; }
<input oninput="style.width = value.length+'ch'" />
目前处理任何字体的最佳解决方案是在一些不可见元素中“镜像”输入文本，测量其宽度，然后将其应用回输入元素。但是，要正确镜像输入，请确保“mirror”元素是inline，对空格敏感，并且匹配<input>字体，如下所示：
inline
input { font: 16px system-ui; min-width: 1ch; width: 1ch; } #mirror { font: 16px system-ui; display: inline; position: absolute; visibility: hidden; left: 0; }
<input oninput="mirror.textContent = value; style.width = Math.ceil(mirror.offsetWidth)+'px'"> <pre id="mirror"></pre>
1条答案
按热度按时间u91tlkcl1#
不幸的是，目前纯CSS解决方案不可用。您可以使用等宽字体和内联事件处理程序，如下所示。但是，这并不适用于所有unicode字符。
目前处理任何字体的最佳解决方案是在一些不可见元素中“镜像”输入文本，测量其宽度，然后将其应用回输入元素。但是，要正确镜像输入，请确保“mirror”元素是
inline，对空格敏感，并且匹配<input>字体，如下所示：