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

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,但调整大小通常在后焦点处完成(并且还主要用于制作更大的内容).

演示: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>    

Answer 2

下面是使用div和flexbox&contenteditable = true而不是输入的示例.只有CSS + HTML.如果不需要标签'form',我发现它很有用.

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