Existe uma forma simples de tornar o html textarea e do tipo de entrada de texto igualmente grande?

StackOverflow https://stackoverflow.com/questions/28713

  •  09-06-2019
  •  | 
  •  

Pergunta

Existe uma forma simples de obter o HTML textarea e um input type="text" para compor com (aproximadamente) igual a largura (em pixels), que funciona em navegadores diferentes?

Um CSS/HTML solução seria brilhante.Eu preferiria não ter que usar Javascript.

Obrigado /Erik

Foi útil?

Solução

Você deve ser capaz de usar

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<textarea class="mywidth"></textarea>

Outras dicas

Para responder à primeira questão (embora tenha sido respondidas a morte):Um CSS largura é o que você precisa.

Mas eu queria responder Caio pergunta nas respostas.Caio, você está problema é que você está definindo a largura do em do.Este é um bom acho que de fazer, mas você precisa lembrar que em são baseados no tamanho do tipo de letra.Por padrão, uma área de entrada e um textarea têm diferentes fontes e tamanhos.Assim, quando você definir a largura para 35em, a área de entrada é usando a largura de tipo de letra e o textarea é utilizando a largura de sua fonte.A área de texto tipo de letra predefinido é menor, portanto, a caixa de texto é menor.Definir a largura em pixels ou pontos, ou assegurar-se de que as caixas de entrada e textareas têm a mesma face de tipo de letra e tamanho:

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

Espero que ajude.

Alguém mencionou isso, em seguida, excluído.Se você quiser estilo de todos os textareas e texto entradas da mesma forma sem classes, use o seguinte CSS (não funciona no IE6):

input[type=text], textarea { width: 80%; }

Este é um CSS pergunta:a largura inclui a borda e o preenchimento larguras, que possuem diferentes padrões de INPUT e TEXTAREA em diferentes navegadores, para fazer esses mesmo assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>

Isso é descrito no Dimensões da caixa seção de especificação de CSS, que diz:

A largura da caixa é dado pela soma das margens esquerda e direita, a borda e o preenchimento, e a largura do conteúdo.

Usar CSS3 para tornar a caixa de texto de entrada e de trabalho da mesma.Ver jsFiddle.

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

Sim, há.Tente fazer algo parecido com isto:

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

Ambas devem significar o mesmo tamanho.Você pode fazer isso com os tamanhos absolutos (px), em relação tamanhos (em) ou a porcentagem de tamanhos.

Apenas uma nota: - a largura é sempre influenciado por algo que está acontecendo do lado do cliente - PHP pode não afectar esses tipos de coisas.

Definição de uma classe comum sobre os elementos e a configuração de uma largura no CSS é o mais limpo aposta.

Usar uma classe CSS para a largura, em seguida, colocar seus elementos em HTML DIVs, uma Galeria de ter a referida classe.

Desta forma, o controle de layout geral deve ser melhor.

Como mencionado no Desigual de texto Html e pendente de largura com XHTML 1.0 strict isso também depende do seu tipo de documento.Tenho notado que quando usando XHTML 1.0 strict, a diferença em largura, de fato, aparece.

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

Estes dias, se você usar o bootstrap, basta dar o seu contributo campos form-control de classe.Algo como:

<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">

<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>

você também pode usar o seguinte CSS: 

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML:

<input class="mywidth" >
<textarea></textarea>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top