Esiste un modo semplice per rendere l'area di testo html e il testo del tipo di input ugualmente larghi?

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

  •  09-06-2019
  •  | 
  •  

Domanda

Esiste un modo semplice per ottenere un'area di testo HTML e un tipo di input="testo" da visualizzare con (approssimativamente) uguale larghezza (in pixel), che funzioni in diversi browser?

Una soluzione CSS/HTML sarebbe brillante.Preferirei non dover usare Javascript.

Grazie /Erik

È stato utile?

Soluzione

Dovresti essere in grado di usarlo

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

Altri suggerimenti

Per rispondere alla prima domanda (anche se è stata data risposta alla morte):Una larghezza CSS è ciò di cui hai bisogno.

Ma volevo rispondere La domanda di Caio nelle risposte.Gaius, il tuo problema è che stai impostando la larghezza in em.Questa è una buona idea da fare, ma devi ricordare che gli em si basano sulla dimensione del carattere.Per impostazione predefinita, un'area di input e un'area di testo hanno facce e dimensioni di carattere diverse.Pertanto, quando imposti la larghezza su 35em, l'area di input utilizza la larghezza del suo carattere e l'area di testo utilizza la larghezza del suo carattere.Il carattere predefinito dell'area di testo è più piccolo, pertanto la casella di testo è più piccola.Imposta la larghezza in pixel o punti oppure assicurati che le caselle di input e le aree di testo abbiano lo stesso aspetto e dimensione del carattere:

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

Spero che aiuti.

Qualcun altro lo ha menzionato e poi lo ha cancellato.Se vuoi dare uno stile a tutte le aree di testo e agli input di testo allo stesso modo senza classi, usa il seguente CSS (non funziona in IE6):

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

Questa è una domanda CSS:la larghezza include le larghezze del bordo e del riempimento, che hanno valori predefiniti diversi per INPUT e TEXTAREA in diversi browser, quindi rendi uguali anche quelli:

<!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>

Questo è descritto nel Dimensioni della scatola sezione delle specifiche CSS, che dice:

La larghezza della casella è data dalla somma dei margini sinistro e destro, del bordo e del riempimento e dalla larghezza del contenuto.

Usa CSS3 per far sì che la casella di testo e l'input funzionino allo stesso modo.Vedere jsFiddle.

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

Si C'è.Prova a fare qualcosa del genere:

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

Entrambi dovrebbero corrispondere alla stessa dimensione.Puoi farlo con dimensioni assolute (px), dimensioni relative (em) o dimensioni percentuali.

Solo una nota: la larghezza è sempre influenzata da qualcosa che accade sul lato client: PHP non può effettuare questo genere di cose.

Impostare una classe comune sugli elementi e impostare una larghezza nei CSS è la soluzione più pulita.

Utilizza una classe CSS per la larghezza, quindi posiziona i tuoi elementi in DIV HTML, DIV con la classe menzionata.

In questo modo, il controllo generale del layout dovrebbe essere migliore.

Come accennato in Casella di testo HTML e larghezza del menu a discesa non uguali con XHTML 1.0 strict dipende anche dal tuo doctype.Ho notato che quando si utilizza XHTML 1.0 strict, la differenza di larghezza appare effettivamente.

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

Al giorno d'oggi, se usi bootstrap, dai semplicemente ai tuoi campi di input il file form-control classe.Qualcosa di simile a:

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

Puoi anche usare i seguenti CSS: 

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

HTML:

<input class="mywidth" >
<textarea></textarea>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top