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

发布时间：2020-12-14 19:39:20 所属栏目：资源来源：网络整理

导读：我有简单的问题 – 文本输入元素指定了2个CSS属性,请参见下面的代码： input type="text" style="resize:horizontal; width:200px" / 当仅指定resize属性时,可以将输入的大小调整为任意宽度.但是,如果我指定了宽度,输入元素的大小可以只调整大于200px,而不是

我有简单的问题 – 文本输入元素指定了2个CSS属性,请参见下面的代码：

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

当仅指定resize属性时,可以将输入的大小调整为任意宽度.但是,如果我指定了宽度,输入元素的大小可以只调整大于200px,而不是更短.

有没有办法如何指定默认宽度,同时输入元素可以调整到任意宽度？宽或小于宽度属性设置？

感谢任何帮助提前！

编辑 – 澄清：我需要自由调整大小的输入元素 – 任意宽度 – 超过200像素和小于200像素

编辑2 – 我最好是寻找纯CSS解决方案,如果可能的话.

解决方法

这是非常接近可行的.您需要将size =“1”设置为< input>上的属性.调整大小真的很小.调整大小由input：active覆盖基类,宽度为：auto ;.输入：当您将其标签输入时,焦点可防止它收缩.

潜在问题：输入：focus强制< input>到一个特定的最小大小,可能比它被调整大小更大.您可以最小宽度：100％使其成为“功能”而不是问题,为用户提供更多空间来输入.如果< input>有焦点,调整大小仍然受到最小宽度的限制,但调整大小通常是后焦点(也是主要用于使一些更大的东西).

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!