HTML - Caixa de texto de redimensionamento automático usando CSS, enquanto os detalhes do formulário permanecem alinhados ao centro - css, html5, css3, css-float

Não tenho certeza se esse Q é respondido antes. por favor, informe se há uma maneira de usar CSS, eu posso conseguir para centralizar os elementos de formulário centralizado e quando o usuário tenta redimensionar a página, para mim, os elementos devem sempre ser resiged para o tamanho da página.

Eu preciso conseguir isso usando CSS, não através de JS.

Respostas:

Para ter elementos de formulário centralizados na horizontal,vai ficar mais largo à medida que a janela do navegador se torna mais larga, e mais fina à medida que a janela do navegador fica mais fina, você pode fazer isso usando CSS. No entanto, você precisará contê-lo em algo para fazer a centralização horizontal.

No meu exemplo, usei o próprio elemento de formulário para fazer a centralização horizontal.

http://jsfiddle.net/HZkft/1/

form { width: 50%;
margin: 0 auto; }
form textarea,
form input { width: 100%; }

com base na resposta setek você pode usar min-width, max-width e calc

<form action="#" method="get">
<textarea cols="40" rows="5"></textarea>
<input type="text" name="given-name" />
<input type="text" name="family-name" />
</form>

o css

form {
min-width: 200px;/* set the min width here */
width: 50%;
max-width: 400px;/* set the max width here */
margin: 0 auto;
}
form textarea,
form input {
width: 100%;
}

ou

form {
min-width: 200px;
width: -webkit-calc(100% -20px);
width: -moz-calc(100% -20px);
width: calc(100% -20px);
max-width: 400px;
margin: 0 auto;
}
form textarea,
form input {
width: 100%;
}

Leitura:
css3 calc

Propriedade CSS max-width