这是非常接近可行的。您需要将size="1"设置为<input>上的一个属性，以将大小调整为非常小。调整大小由input:active控制，它用width: auto;覆盖基类。input:focus防止它在您按Tab键键入时收缩。
潜在问题：input:focus强制将<input>调整为特定的min-size，该min-size可能大于调整后的大小。您可以min-width: 100%将其作为一个“特性”而不是一个问题，从而为用户提供更多的输入空间。如果<input>有焦点，调整大小仍然受到min-width的限制，但调整大小通常是在焦点后完成的（而且，主要用于使东西更大）。
演示：http://jsfiddle.net/ThinkingStiff/jNnCW/
HTML（根据您的要求内嵌样式）：

<input id="text" type="text" size="1"/>
<style>
    input {
        resize: horizontal;
        width: 200px;
    }

    input:active {
        width: auto;   
    }

    input:focus {
        min-width: 200px;
    }
</style>

Here is an example使用div和flexbox & contenteditable=true代替input。只有CSS + HTML。我发现如果不需要标签“form”，它会很有用。

#flex {
  display: flex;
  display: -webkit-flex;
  line-height: 30px;
}
#inner {
    padding: 0 20px;
    min-width: 100px;
    height:auto;
    line-height:1.5;
    outline:none;
    background-color: #dfd4d7;
}

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

我在网上读到的所有东西（见下文）都表明，resize属性只适用于没有设置overflow: visible的块级元素和textarea元素。从技术上讲，它甚至不适用于input元素（两者都不适用，即使设置为display: block，我也无法让resize被Firefox识别）。
链接：https://developer.mozilla.org/en/CSS/resize和http://www.css3.info/preview/resize/以及http://www.w3.org/TR/css3-ui/#resize

让input自由调整大小的简单方法是将其设置为具有width: 100%，然后将其放置在具有min-width的inline-block容器中（min-width设置input的默认宽度）。调整容器大小以调整input的大小。
参见：http://jsfiddle.net/Wexcode/TvZAr/