html - 指定宽度后，如何在输入元素上强制自由调整 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>