默认输入元素大小

Question

input 元素默认是 size=“20” 如果这不是内联定义的或者 CSS 样式规则被赋予它。

如何使默认值成为值的实际大小？对于其他元素：

 <div style="display: inline; width: auto;">
    The box will only fit the width of it's content
</div>

width: auto 就是你所需要的。我无法定义宽度，因为值可能会更长。例如：

 <input id="short" type="text" value="1000" />
<input id="long" type="text" value=" Areally long name is in this input field." />

我希望 #short 的大小为 1000（本质上是 size=“4” + 填充），但 #long 的长度根据需要设置。这些输入是以编程方式输入的，所以我不能简单地在我想要的短类上放一个短类，在我想要长的类上放一个长类。如果我可以放：

 input { width: auto; }

无论如何要这样做？

原文由 o_O 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

输入元素默认为 size=“20”

这个“默认大小”取决于浏览器、版本和您的操作系统。在内联样式中无法做到这一点。

最好的解决方案是设置宽度和填充，使其加起来达到 100%

 input {
  width: 98%;
  padding: 1%;
}

然后设置为绝对左右0

 <fieldset>
    <input type="text" />
</fieldset>

最后添加这个CSS

 <style type="text/css">
    fieldset {
      position: relative;
    }

    input {
        position: absolute;
        left: 0;
        right: 0;
    }
</style>

原文由 Sato 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

“如何将默认值设置为值的实际大小？(…) 如果我可以输入：input { width: auto; } 无论如何，我真的很喜欢它？”

在 输入 HTML 元素 中， width 由其 size 属性控制。这是我用来模拟 { width: auto; } 的一种快速方法，它是浏览器依赖性证明：

角度：

 <input type="text" [size]="element.value.length + 1" #element>

纯香草 JavaScript：

 <input type="text" oninput="this.size = this.value.length + 1">

原文由 Fabricio 发布，翻译遵循 CC BY-SA 4.0 许可协议