Question

我有一个简单的问题 - 文本输入元素，它指定了2个CSS属性，请参阅下面的代码：

<input type="text" style="resize:horizontal; width:200px" />

仅指定resize属性时，input可以调整为任意宽度。但是，如果我指定了width，则input元素的大小可以仅调整为200px，而不是更短。

有没有办法如何指定默认宽度，同时输入元素可调整到任何宽度？比width属性设置的更宽或更短？

提前感谢您的帮助！

编辑 - 澄清：我需要输入元素可以自由调整大小 - 任何宽度 - 超过200px且小于200px

编辑2 - 如果有可能，我最好寻找纯CSS解决方案。

Answer 1

这非常接近可行。您需要将size="1"设置为<input>上的属性才能调整大小。调整大小由input:active控制，它使用width: auto;覆盖基类。 input:focus阻止它在您键入时键入时缩小。

潜在问题：input:focus强制将<input>强制转换为特定min-size，这可能会大于调整大小的min-width: 100%。您可以<input>将此作为“功能”而不是问题，为用户提供更多空间来键入。如果min-width具有焦点，则调整大小仍受<input id="text" type="text" size="1"/> <style> input { resize: horizontal; width: 200px; } input:active { width: auto; } input:focus { min-width: 200px; } </style>限制，但调整大小通常在焦点后完成（并且主要用于制作更大的内容）。

演示：http://jsfiddle.net/ThinkingStiff/jNnCW/

HTML（根据您的要求内联样式）：

{{1}}

Answer 2

使用flexbox＆amp; amp;的

Here is an example contenteditable = true而不是输入。只有CSS + HTML。如果没有标签形式，我发现它很有用。必需的。

＆＃13;

#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;
}

＆＃13;

<div id="flex">Type some text here:
<div id="inner" contenteditable="true" spellcheck="false"><div>
</div>

＆＃13;

Answer 3

我在线阅读的所有内容（见下文）都表明resize属性仅适用于不设置overflow: visible的块级元素和textarea元素。它在技术上甚至不适用于input元素（它们都不是，即使设置为display: block我也无法让Firefox识别resize。

链接：https://developer.mozilla.org/en/CSS/resize和http://www.css3.info/preview/resize/以及http://www.w3.org/TR/css3-ui/#resize

Answer 4

让input自由调整大小的简单方法是将其设置为width: 100%，然后将其放在inline-block容器中min-width（ min-width设置input的默认宽度。调整容器大小以调整input的大小。

请参阅：http://jsfiddle.net/Wexcode/TvZAr/

如何在指定宽度时强制在输入元素上自由调整CSS大小？

4 个答案: