Question

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.

Answer 1

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>