Is it possible to use textarea's resize function in an input?

Good Morning, guys.

I'm making a form, and I wanted to make a <input type='text' /> that the user could set the width, with that drag resize that exists in textarea.

I want to insert this feature into a simple snippet like:

<p>Declaro para os devidos fins que eu <input type="text" name="nome" placeholder="Insira seu nome"></p>

Is this possible? I tried to add in the css a resize: both, or even a resize: horizontal in the input but it did not work.

input {
    resize: horizontal;
    overflow: auto;
}

I tried using textarea allowing only horizontal resize, but the same does not align to the remaining as input

Behavior with input

Effect with input

Behavior with textarea Effect with textarea

Thank you guys right now. Good week to all

Author: Rafael, 2020-04-21
Source

2 answers

The property resize it has the following specification:

Note: resize is not applied in the following cases:

  • elements inline
  • elements Block in which the property overflow is not with the value visible

You can see a list of elements inline, and the element <input> is in it. So resize is expected not to work on.

"but what if I switch to display: block and put overflow: visible?"

Should work, but the <input> it is a replaced element (a substituted element is an element whose representation is outside the scope of CSS), so it is not possible to use resize in it because of these limitations.

Alternative:

What might work for you (of course it depends on case by case) is to use a <textarea>, using CSS to allow to expand horizontally and hide the scrollbar. To prevent the user from creating new rows with Enter , it would be via JavaScript. So she will have a similar behavior as desired.

document.querySelector("#txtArea").addEventListener("keydown", e => {
  if (e.keyCode === 13) {
    e.preventDefault();
  }
});
textarea {
  resize: horizontal;
  white-space: nowrap;
  overflow: hidden;
  min-width: 120px;

  /* Para alinhar com o texto */
  margin-bottom: -4px;
}
<p>Declaro para os devidos fins que eu <textarea id="txtArea" placeholder="Insira seu nome" rows="1"></textarea> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus nisi nibh, nec varius tortor blandit nec. Suspendisse scelerisque mauris et imperdiet placerat. Vivamus vel ex lorem. Morbi est orci, suscipit in consectetur in, egestas a risus.</p>

"Why does it work on <textarea> then, if it is also a substituted element?"

Well, the MDN documentation indicates that in most browsers the <textarea>'s are resizable, so my speculation here is that this is more for a convention than specification. You can read the specifications of the <textarea>, but there is not even a mention of resize.

 3
Author: Rafael Tavares, 2020-04-21 16:38:09

Directly in a input No, but you can use a container: 

span {display:inline-block;resize:both;overflow:hidden;padding-right:20px;border:1px solid red}
input {margin-right:20px;width:100%;height:100%;border:1px solid blue}
<span><input type="text" value="fake resize"></span>

The border is just for easy viewing. Note that I inserted a padding to make it easier to pull the corner without affecting the text, but you can remove it if you want.

 5
Author: Bacco, 2020-04-21 16:25:56