resizeable input[type="text"]

by Laurens Maneschijn

HTML

<h1>
resizeable input[type="text"]
</h1>
<p>
  See css panel for details.
</p>
<ul>
  <li>Seems to work anno 2019 in Chrome 73.0.3683.86.
  <li>Does NOT work in Edge 42.17134.1.0
</ul>

<hr>

regular inputs:<br>

v0: 
<input type="text"/>
<input type="text" value="MMMMMMMMMMMMMMM"/>

<hr>

v1:
<!-- NB: no whitespace between input and next span -->
<span class="resizable-input">
  <input type="text"/><span></span>
</span>

<span class="resizable-input">
  <input type="text" value="MMMMMMMMMMMMMMM"/><span></span>
</span>

<hr>

v2:
<!-- NB: no whitespace between input and next span -->
<span class="resizable-input-v2">
  <input type="text"/><span></span>
</span>

<span class="resizable-input-v2">
  <input type="text" value="MMMMMMMMMMMMMMM"/><span></span>
</span>

<hr>

v3:
<span class="resizable-input-v3">
  <input type="text"/>
</span>

<span class="resizable-input-v3">
  <input type="text" value="MMMMMMMMMMMMMMM"/>
</span>

<hr>

<p>
v1: Based on stackoverflow answer:
<a target="_blank" href="https://stackoverflow.com/questions/8572190/how-to-make-text-input-box-resizable-like-textarea-by-dragging-its-right-botto">here</a> .<br>
<small>Note that I added a missing second &lt;span&gt; element to the html.</small>
</p>

<p>
v2: minor changes in v2:<br>
Note that the "drag handle" is hard to reach in v1 if the text value fills the input box all the way. Add a little (0.5em) padding-right to still be able to target the handle for resize dragging.
</p>

<p>
v3: removed span after input, replaced with pseudo-element ::after <br>
</p>

<hr>

CSS

/* ****************************************
   *** v1: ********************************
   **************************************** */

.resizable-input {
    /* make resizable */
    overflow-x: hidden;
    resize: horizontal;
    display: inline-block;

    /* no extra spaces */
    padding: 0;
    margin: 0;
    white-space: nowrap;

    /* default widths */
    width: 10em;
    min-width: 2em;
    max-width: 30em;
}

/* let <input> assume the size of the wrapper */
.resizable-input > input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* add a visible handle */
.resizable-input > span {
    display: inline-block;
    vertical-align: bottom;
    margin-left: -16px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg==");
    cursor: ew-resize;
}

/* ****************************************
   *** v2: ********************************
   **************************************** */

.resizable-input-v2 {
    /* make resizable */
    overflow: hidden;
    resize: horizontal;
    display: inline-block;

    /* no extra spaces */
    padding: 0;
    margin: 0;
    white-space: nowrap;

    /* default widths */
    width: 10em;
    min-width: 2em;
    max-width: 100%;
}

/* let <input> assume the size of the wrapper */
.resizable-input-v2 > input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding-right: 0.5em;
}

/* add a visible handle */
.resizable-input-v2 > span {
    display: inline-block;
    vertical-align: bottom;
    margin-left: -14px;
    margin-bottom: -2px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg==");
    cursor: ew-resize;
    z-index: 2;
}

/* ****************************************
  ...