Como defino o tamanho de uma caixa de texto HTML?

Como defino o tamanho de uma caixa de texto HTML?

Apenas use:

textarea {
    width: 200px;
}

ou

input[type="text"] {
    width: 200px;
}

Dependendo do que você entende por 'caixa de texto'.

Sua marcação:

<input type="text" class="resizedTextbox" />

O CSS:

.resizedTextbox {width: 100px; height: 20px}

Lembre-se de que o tamanho da caixa de texto é uma "vítima" do modelo de caixa do W3C . O que quero dizer com vítima é que a altura e largura de uma caixa de texto é a soma das propriedades de altura / largura atribuídas acima, além da altura / largura do preenchimento e da largura da borda. Por esse motivo, suas caixas de texto terão tamanhos ligeiramente diferentes em navegadores diferentes, dependendo do preenchimento padrão em navegadores diferentes. Embora diferentes navegadores tendam a definir diferentes preenchimentos para as caixas de texto, a maioria das folhas de estilo redefinidas não tende a incluir <input />marcas em suas folhas redefinidas, então isso é algo para se manter em mente.

Você pode padronizar isso definindo seu próprio preenchimento. Aqui está seu CSS com o preenchimento especificado, para que a caixa de texto tenha a mesma aparência em todos os navegadores:

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

Eu adicionei um preenchimento de pixel porque alguns navegadores tendem a fazer a caixa de texto parecer muito cheia se o preenchimento for de 0 px. Dependendo do seu design, você pode querer adicionar ainda mais preenchimento, mas é altamente recomendável que você mesmo defina o preenchimento, caso contrário, você deixará que diferentes navegadores decidam por si próprios. Para obter ainda mais consistência entre os navegadores, você também deve definir a borda.

input[type="text"]
{
    width:200px
}

Seu código de caixa de texto:

<input type="text" class="textboxclass" />

Seu código CSS:

input[type="text"] {
height: 10px;
width: 80px;
}

ou

.textboxclass {
height: 10px;
width: 80px;
}

Portanto, primeiro você seleciona seu elemento com atributos (veja o primeiro exemplo) ou classes (veja o último exemplo). Posteriormente, você atribui valores de altura e largura ao seu elemento.

Isso funciona para mim no IE 10 e FF 23

<input type="text" size="100" />

Se você não quiser usar o método de classe, pode usar o método pai-filho para fazer alterações na caixa de texto.

Por exemplo. Criei um formulário no meu formulário div.

Código HTML:

<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>

Agora o código CSS será como:

.form textarea{
    height: 220px;
    width: 342px; 

Problema resolvido.

Tenha cuidado! O atributo de largura é cortado pelo atributo de largura máxima. Então eu usei ....

    <form method="post" style="width:1200px">
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4>

Experimentar:

input[type="text"]{
padding:10px 0;}

Dessa forma, ele permanece independente do tamanho do texto definido para a caixa de texto. Você está aumentando a altura usando o preenchimento

Experimente este código:

input[type="text"]{
 padding:10px 0;}

Dessa forma, ele permanece independente do tamanho do texto definido para a caixa de texto. Você está aumentando a altura usando preenchimento.

Os elementos podem ser dimensionados com os atributos heighte width.

Você pode definir a largura de entrada dependente em relação à largura do contêiner.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}