Html 指定宽度时如何强制对输入元素进行自由 CSS 调整大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8642255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force free CSS resize on input element when its width is specified?
提问by Frodik
I have simple problem - text input element which has specified 2 CSS attributes, see code below:
我有一个简单的问题 - 指定了 2 个 CSS 属性的文本输入元素，请参阅下面的代码：
<input type="text" style="resize:horizontal; width:200px" />
When only resizeattribute is specified, the inputcan be resized to any width. However, if I have widthspecified, the inputelement can be resized only wider than 200px, not shorter.
当仅resize指定属性时，input可以将其调整为任何宽度。但是，如果我已width指定，则input元素的大小只能调整为宽于200px，而不是更短。
Is there a way how can I have default width specified and in the same time have input element resizable to any width? Wider or shorter than set by widthattribute?
有没有办法如何指定默认宽度并同时将输入元素调整为任何宽度？比width属性设置的更宽或更短？
Thanks for any help in advance!
提前感谢您的任何帮助！
EDIT - clarification: I need input element to be resizable freely - to any width - more than 200pxand less than 200px
编辑 - 澄清：我需要输入元素可以自由调整大小 - 任何宽度 - 大于200px和小于200px
EDIT 2 - I am preferably looking for pure CSS solution if it is possible.
编辑 2 - 如果可能的话，我最好寻找纯 CSS 解决方案。
采纳答案by ThinkingStiff
This is pretty close to workable. You need to set size="1"as an attribute on the <input>to resize really small. The resize is controlled by input:activewhich overrides the base class with width: auto;. input:focusprevents it from shrinking when you tab into it to type.
这非常接近可行。您需要将其设置size="1"为一个属性<input>以调整非常小的大小。调整大小由input:active哪个覆盖基类控制width: auto;。input:focus防止它在您输入时缩小。
Potential issues: input:focusforces the <input>to a specific min-size, which might be larger than what it's been resized to. You could min-width: 100%to make this a "feature" instead of an issue, giving the user more space to type. If the <input>has focus, resize is still limited by min-width, but resize is usually done post-focus (and also, mostly used to make something larger).
潜在问题：将input:focus强制<input>为特定的min-size，这可能比调整后的大小要大。您可以将其min-width: 100%设为“功能”而不是问题，从而为用户提供更多输入空间。如果<input>有焦点，则调整大小仍然受 限制min-width，但调整大小通常在焦点后完成（而且，主要用于制作更大的东西）。
Demo: http://jsfiddle.net/ThinkingStiff/jNnCW/
演示：http: //jsfiddle.net/ThinkingStiff/jNnCW/
HTML (with styles inline as you requested):
HTML（根据您的要求内联样式）：
<input id="text" type="text" size="1"/>
<style>
input {
resize: horizontal;
width: 200px;
}
input:active {
width: auto;
}
input:focus {
min-width: 200px;
}
</style>
回答by snowerest
Here is an exampleof using div with flexbox & contenteditable=true instead of input. Only CSS + HTML. I found it useful if no tag 'form' required.
这是一个使用 div 和 flexbox & contenteditable=true 而不是 input的例子。只有 CSS + HTML。如果不需要标签“表单”，我发现它很有用。
#flex {
display: flex;
display: -webkit-flex;
line-height: 30px;
}
#inner {
padding: 0 20px;
min-width: 100px;
height:30px;
line-height:30px;
outline:none;
background-color: #dfd4d7;
}<div id="flex">Type some text here:
<div id="inner" contenteditable="true" spellcheck="false"><div>
</div>回答by ScottS
Everything I read online (see below) indicates that the resizeproperty only works on block level elements that do nothave overflow: visibleset and on textareaelements. It does not even technically work for inputelements (which are neither, and even if set to display: blockI could not get the resizeto be recognized by Firefox).
一切我在线阅读（见下文）表明resize属性仅适用于该块级元素不具备overflow: visible集和textarea元素。从技术上讲，它甚至不适用于input元素（两者都不是，即使设置为display: block我也无法让resizeFirefox 识别）。
Links: https://developer.mozilla.org/en/CSS/resizeand http://www.css3.info/preview/resize/and http://www.w3.org/TR/css3-ui/#resize
链接：https: //developer.mozilla.org/en/CSS/resize和http://www.css3.info/preview/resize/和http://www.w3.org/TR/css3-ui/#调整大小
回答by Wex
The simple way to make an inputresize freely is to set it to it to have width: 100%, and then place it inside an inline-blockcontainer with a min-width(min-widthsets the default width for the input). Resize the container to resize the input.
input自由调整大小的简单方法是将其设置为 has width: 100%，然后将其放置在inline-block带有min-width(min-width设置 的默认宽度input)的容器中。调整容器大小以调整input.
