Skip to main content
Adicionando referências à elementos substituídos
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

A propriedade resize possui a seguinte especificação:

Nota: resize não é aplicado nos seguintes casos:

  • Elementos inline
  • Elementos block no qual a propriedade overflow não está com o valor visible

Você pode ver uma lista de elementos inline, e o elemento <input> se encontra nela. Então, é esperado que o resize não funcione nele.

"Mas e se eu mudar para display: block e colocar overflow: visible?"

Deveria funcionar, mas o <input> é um replaced element (um elemento substituído é um elemento cuja representação está fora do escopo do CSS), então não é possível usar resize nele por conta dessas limitações.


Alternativa:

O que talvez sirva para você (claro que depende de caso a caso) é usar uma <textarea>, usando CSS para permitir expandir horizontalmente e esconder a barra de rolagem. Para impedir que o usuário crie novas linhas com Enter, seria via JavaScript. Assim ela terá um comportamento similar ao desejado.

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>

"Por que funciona na <textarea> então, se ela também é um elemento substituído?"

Bom, a documentação do MDN indica que na maioria dos navegadores as <textarea>'s são redimensionoáveis, então a minha especulação aqui é de que isso está mais para uma convenção do que especificação. Você pode ler as especificações da <textarea>, mas lá não há uma menção sequer ao resize.

A propriedade resize possui a seguinte especificação:

Nota: resize não é aplicado nos seguintes casos:

  • Elementos inline
  • Elementos block no qual a propriedade overflow não está com o valor visible

Você pode ver uma lista de elementos inline, e o elemento <input> se encontra nela. Então, é esperado que o resize não funcione nele.


Alternativa:

O que talvez sirva para você (claro que depende de caso a caso) é usar uma <textarea>, usando CSS para permitir expandir horizontalmente e esconder a barra de rolagem. Para impedir que o usuário crie novas linhas com Enter, seria via JavaScript. Assim ela terá um comportamento similar ao desejado.

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>

A propriedade resize possui a seguinte especificação:

Nota: resize não é aplicado nos seguintes casos:

  • Elementos inline
  • Elementos block no qual a propriedade overflow não está com o valor visible

Você pode ver uma lista de elementos inline, e o elemento <input> se encontra nela. Então, é esperado que o resize não funcione nele.

"Mas e se eu mudar para display: block e colocar overflow: visible?"

Deveria funcionar, mas o <input> é um replaced element (um elemento substituído é um elemento cuja representação está fora do escopo do CSS), então não é possível usar resize nele por conta dessas limitações.


Alternativa:

O que talvez sirva para você (claro que depende de caso a caso) é usar uma <textarea>, usando CSS para permitir expandir horizontalmente e esconder a barra de rolagem. Para impedir que o usuário crie novas linhas com Enter, seria via JavaScript. Assim ela terá um comportamento similar ao desejado.

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>

"Por que funciona na <textarea> então, se ela também é um elemento substituído?"

Bom, a documentação do MDN indica que na maioria dos navegadores as <textarea>'s são redimensionoáveis, então a minha especulação aqui é de que isso está mais para uma convenção do que especificação. Você pode ler as especificações da <textarea>, mas lá não há uma menção sequer ao resize.

Alinhando com texto
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

A propriedade resize possui a seguinte especificação:

Nota: resize não é aplicado nos seguintes casos:

  • Elementos inline
  • Elementos block no qual a propriedade overflow não está com o valor visible

Você pode ver uma lista de elementos inline, e o elemento <input> se encontra nela. Então, é esperado que o resize não funcione nele.


Alternativa:

O que talvez sirva para você (claro que depende de caso a caso) é usar uma <textarea>, usando CSS para permitir expandir horizontalmente e esconder a barra de rolagem. Para impedir que o usuário crie novas linhas com Enter, seria via JavaScript. Assim ela terá um comportamento similar ao desejado.

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>

A propriedade resize possui a seguinte especificação:

Nota: resize não é aplicado nos seguintes casos:

  • Elementos inline
  • Elementos block no qual a propriedade overflow não está com o valor visible

Você pode ver uma lista de elementos inline, e o elemento <input> se encontra nela. Então, é esperado que o resize não funcione nele.


Alternativa:

O que talvez sirva para você (claro que depende de caso a caso) é usar uma <textarea>, usando CSS para permitir expandir horizontalmente e esconder a barra de rolagem. Para impedir que o usuário crie novas linhas com Enter, seria via JavaScript. Assim ela terá um comportamento similar ao desejado.

document.querySelector("#txtArea").addEventListener("keydown", e => {
  if (e.keyCode === 13) {
      e.preventDefault();
  }
});
textarea {
  resize: horizontal;
  white-space: nowrap;
  overflow: hidden;
}
<textarea id="txtArea" rows="1"></textarea>

A propriedade resize possui a seguinte especificação:

Nota: resize não é aplicado nos seguintes casos:

  • Elementos inline
  • Elementos block no qual a propriedade overflow não está com o valor visible

Você pode ver uma lista de elementos inline, e o elemento <input> se encontra nela. Então, é esperado que o resize não funcione nele.


Alternativa:

O que talvez sirva para você (claro que depende de caso a caso) é usar uma <textarea>, usando CSS para permitir expandir horizontalmente e esconder a barra de rolagem. Para impedir que o usuário crie novas linhas com Enter, seria via JavaScript. Assim ela terá um comportamento similar ao desejado.

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>

Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

A propriedade resize possui a seguinte especificação:

Nota: resize não é aplicado nos seguintes casos:

  • Elementos inline
  • Elementos block no qual a propriedade overflow não está com o valor visible

Você pode ver uma lista de elementos inline, e o elemento <input> se encontra nela. Então, é esperado que o resize não funcione nele.


Alternativa:

O que talvez sirva para você (claro que depende de caso a caso) é usar uma <textarea>, usando CSS para permitir expandir horizontalmente e esconder a barra de rolagem. Para impedir que o usuário crie novas linhas com Enter, seria via JavaScript. Assim ela terá um comportamento similar ao desejado.

document.querySelector("#txtArea").addEventListener("keydown", e => {
  if (e.keyCode === 13) {
      e.preventDefault();
  }
});
textarea {
  resize: horizontal;
  white-space: nowrap;
  overflow: hidden;
}
<textarea id="txtArea" rows="1"></textarea>