默认输入元素大小答案

【问题标题】：Default input element size默认输入元素大小
【发布时间】：2012-07-31 20:34:58
【问题描述】：

输入元素默认为 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; }

无论如何要这样做？

【问题讨论】：

width:auto for <input> fields的可能重复
我看到了这个和其他一些，但他们都试图做的是让一个输入填充父母。我希望根据内容调整多个输入的大小。
但它与stackoverflow.com/questions/8100770/…完全相同

标签： html css input textbox

【解决方案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>

【讨论】：

您好，您是说输入大小取决于浏览器和操作系统。根据浏览器的版本和操作系统，您是否有显示不同大小的输入的链接或表格？这将非常有用。
您有什么建议吗？
现在，size 属性的默认值 20 记录在 within the standard。我无法确认撰写此答案时的情况。

【解决方案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">

【讨论】：

这是什么语法？角度？
是的。我刚刚进行了编辑以澄清它并添加纯 JS 语法。

【解决方案3】：

假设您在表单中的每一行都有每个输入，您可以将 size 属性设置为所需的大小，还可以添加一个 css：

input[type="text"] {
  max-width: 100%;
}

这可确保该字段不会溢出表单。这种方法可以直观地提示短字段需要多少数据（因为它们的大小合适），同时对长字段设置上限。

【讨论】：