How to force free CSS resize on input element when its width is specified?

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.

ThinkingStiff · Accepted Answer · 2011-12-30T06:22:12.307

20

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>

edited Dec 30 '11 at 06:22

answered Dec 30 '11 at 05:51

ThinkingStiff

64,767
30
146
239

I like your solution the most. But I have just one small glitch - I need to specify width of the text input element INLINE. I can't use "input { width:200px }" declaration in stylesheet, because this value is dynamically generated for each input of the form by PHP. Could you please update your answer so it works with inline style declaration ? I've tried fixing your fiddle, but it didn't work out: http://jsfiddle.net/fvUSb/ – Frodik Dec 30 '11 at 06:07
1

Can you add a ` – ThinkingStiff Dec 30 '11 at 06:16
3

doesn't work, please fix your demo – Huy - Logarit Feb 07 '22 at 15:23

score 12 · Answer 2 · edited Jun 26 '23 at 21:45

Here is an example of using div with flexbox & contenteditable=true instead of input. Only CSS + HTML. I found it useful if no tag 'form' required.

#flex {
  display: flex;
  display: -webkit-flex;
  line-height: 30px;
}
#inner {
    padding: 0 20px;
    min-width: 100px;
    height:auto;
    line-height:1.5;
    outline:none;
    background-color: #dfd4d7;
}

<div id="flex">Type some text here:
<div id="inner" contenteditable="true" spellcheck="false"><div>
</div>

score 2 · Answer 3 · answered Dec 30 '11 at 04:17

Everything I read online (see below) indicates that the resize property only works on block level elements that do not have overflow: visible set and on textarea elements. It does not even technically work for input elements (which are neither, and even if set to display: block I could not get the resize to be recognized by Firefox).

Links: https://developer.mozilla.org/en/CSS/resize and http://www.css3.info/preview/resize/ and http://www.w3.org/TR/css3-ui/#resize

score -2 · Answer 4 · answered Dec 30 '11 at 05:38

The simple way to make an input resize freely is to set it to it to have width: 100%, and then place it inside an inline-block container with a min-width (min-width sets the default width for the input). Resize the container to resize the input.

See: http://jsfiddle.net/Wexcode/TvZAr/

How to force free CSS resize on input element when its width is specified?

4 Answers4

Linked