Is it possible to use the resize function of the textarea in an input?

Question

Good morning, everyone.

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 the textarea.

I want to insert this feature in a simple excerpt like:

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

Is that possible? I tried adding a resize: both, or even a resize: horizontal no input but did not work.

input {
    resize: horizontal;
    overflow: auto;
}

I tried to use the textarea allowing only horizontal resize, but it does not align to the rest as input

Behavior with the input

---

Behavior with textarea

Thank you from now on guys. Happy week to everyone

Answer 1

Directly into 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 edge 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.

Answer 2

The estate resize has the following specification:

Note: resize is not applied in the following cases:

• Elements inline
• Elements block on which property overflow not with the value visible

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

"But what if I change to display: block and put overflow: visible?"

It should work, but the <input> is a replaced element (a replaced element is an element whose representation is outside the scope of the CSS), so it is not possible to use resize on account of those limitations.

---

Alternative:

What might suit you (of course it depends on case by case) is to use a <textarea>, using CSS to allow you to expand horizontally and hide the scrollbar. To prevent the user from creating new lines with Enter, would be via Javascript. So it will behave similar to the 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 in <textarea> so if she is also a replaced element?"

Good, the MDN documentation indicates that in most browsers <textarea>'are scalable, so mine speculation Here’s what’s more for a convention than specification. You can read the specifications of <textarea>, but there is not even a mention of the resize.