当指定宽度时，如何在输入元素上强制自由调整CSS大小？ [英] How to force free CSS resize on input element when its width is specified?

问题描述

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

 < input type =textstyle =resize：horizo​​ntal; width：200px/> 
  

当仅指定 resize 属性时， 输入可以调整为任何宽度。但是，如果我指定 width ，则元素只能调整大于 200px ，不短。

有没有办法如何指定默认宽度，同时有输入元素可调整大小到任何宽度？感谢您提供任何帮助！

$ b更多或更短的 width 属性？
$ b

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

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

解决方案

这非常接近可行。您需要将 size =1设置为< input> 上的一个属性，调整大小由 input：active 控制，其覆盖基本类与 width：auto; 。 input：focus 防止它在您键入时进行缩进。

潜在问题：输入：focus 强制< input> 到特定的 min-size ，这可能大于调整大小。您可以 min-width：100％将其设为功能，而不是问题，从而为用户提供更多的键入空间。如果< input> 有焦点，resize仍受限于 min-width ，但调整大小通常是通过post -focus（并且主要用于制作更大的东西）。

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

HTML（内容符合您的要求）：

 < input id =texttype =textsize =1/> 
< style> 
 input {
 resize：horizo​​ntal; 
 width：200px; 
} 
 
输入：active {
 width：auto; 
} 
 
输入：focus {
 min-width：200px; 
} 
< / style> 
  

I have simple problem - text input element which has specified 2 CSS attributes, see code below:

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

When only resize attribute is specified, the input can be resized to any width. However, if I have width specified, the input element can be resized only wider than 200px, not shorter.

Is there a way how can I have default width specified and in the same time have input element resizable to any width? Wider or shorter than set by width attribute?

Thanks for any help in advance!

EDIT - clarification: I need input element to be resizable freely - to any width - more than 200px and less than 200px

EDIT 2 - I am preferably looking for pure CSS solution if it is possible.

解决方案

This is pretty close to workable. You need to set size="1" as an attribute on the <input> to resize really small. The resize is controlled by input:active which overrides the base class with width: auto;. input:focus prevents it from shrinking when you tab into it to type.

Potential issues: input:focus forces the <input> to a specific min-size, which might be larger than what it's been resized to. You could min-width: 100% to make this a "feature" instead of an issue, giving the user more space to type. If the <input> has focus, resize is still limited by min-width, but resize is usually done post-focus (and also, mostly used to make something larger).

Demo: http://jsfiddle.net/ThinkingStiff/jNnCW/

HTML (with styles inline as you requested):

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

    input:active {
        width: auto;   
    }

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

这篇关于当指定宽度时，如何在输入元素上强制自由调整CSS大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！