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 valorvisible
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
.