Czy istnieje prosty sposób dokonać html textarea i rodzaj wprowadzanego tekstu równie szeroki?

głosy
17

Czy istnieje prosty sposób na uzyskanie textarea HTML oraz input type = „text”, aby uczynić z (w przybliżeniu) równej szerokości (w pikselach), który działa w różnych przeglądarkach?

Rozwiązanie CSS / HTML byłby genialny. Wolałbym nie musieć używać Javascript.

Dzięki / Erik

Utwórz 26/08/2008 o 16:50
źródło użytkownik
W innych językach...                            


12 odpowiedzi

głosy
13

Powinieneś być w stanie wykorzystać

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

Odpowiedział 26/08/2008 o 16:56
źródło użytkownik

głosy
1

Tak jest. Spróbuj zrobić coś takiego:

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

Obie powinny zbliżać się do tego samego rozmiaru. Można zrobić to z wielkości absolutnych (PX), względne rozmiary (EM) lub wielkościach procentowych.

Odpowiedział 26/08/2008 o 16:56
źródło użytkownik

głosy
0

Tylko uwaga - szerokość jest zawsze pod wpływem czegoś, co dzieje się po stronie klienta - PHP nie może wpływać te różne rzeczy.

Określając wspólną klasę na elementy i ustawienia szerokości w CSS to najczystszy zakład.

Odpowiedział 26/08/2008 o 17:01
źródło użytkownik

głosy
4

Ktoś wspomniał o tym, a następnie usunął go. Jeśli chcesz projektować wszystkie pola tekstowe i tekst wejść w ten sam sposób bez klas, należy użyć następującego CSS (nie działa w IE6):

input[type=text], textarea { width: 80%; }
Odpowiedział 26/08/2008 o 17:09
źródło użytkownik

głosy
0

Użyj klasę CSS dla szerokości, a następnie umieścić elementy w HTML DIV, DIV o wspomnianą klasę.

W ten sposób, kontrola ogólny układ powinien być lepszy.

Odpowiedział 26/08/2008 o 17:39
źródło użytkownik

głosy
3

To jest pytanie, CSS: szerokość obejmuje obramowań szerokościach, które mają różne ustawienia domyślne dla wejścia i TEXTAREA w różnych przeglądarkach, dlatego takie same jak dobrze:

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

Jest to opisane w okna Wymiary części specyfikacji CSS, który mówi:

Szerokość pole jest sumą lewego i prawego marginesu, obramowanie i obicia, a szerokość zawartości.

Odpowiedział 26/08/2008 o 17:59
źródło użytkownik

głosy
5

Aby odpowiedzieć na pierwsze pytanie (chociaż to było odpowiedział na śmierć): Szerokość CSS jest to, czego potrzebujesz.

Ale chciałem odpowiedzieć na pytanie Gajusz jest w odpowiedziach. Gajusz, jesteś jest problem, że jesteś ustawienie szerokości w Em. Jest to dobry think do zrobienia, ale trzeba pamiętać, że em są oparte na wielkości czcionki. Domyślnie obszar wejściowy i textarea mają różne twarze i rozmiary czcionek. Więc kiedy jesteś ustawienie szerokości do 35em, obszar wejściowy wykorzystuje szerokość o to czcionki i textarea wykorzystuje szerokość na jego czcionki. Domyślną czcionką tekst obszar jest mniejszy, więc pole tekstowe jest mniejszy. Albo ustawić szerokość w pikselach lub punktów, lub zapewnić, że pola wejściowe i pola tekstowe mają taką samą twarz i rozmiar czcionki:

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

Nadzieję, że pomaga.

Odpowiedział 28/08/2008 o 14:33
źródło użytkownik

głosy
0

Jak wspomniano w Nierówne html textbox i rozwijanej szerokości z XHTML 1.0 Strict to również zależy od typu dokumentów. Zauważyłem, że podczas korzystania z XHTML 1.0 Strict, różnica w szerokości rzeczywiście pojawią.

Odpowiedział 03/10/2008 o 13:24
źródło użytkownik

głosy
-1

można także użyć następującego CSS:

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

HTML:

<input class="mywidth" >
<textarea></textarea>
Odpowiedział 23/07/2013 o 12:32
źródło użytkownik

głosy
2

Użyj CSS3, aby pole tekstowe i praca input takie same. Zobacz jsFiddle .

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
Odpowiedział 11/06/2014 o 03:50
źródło użytkownik

głosy
0
input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }
Odpowiedział 24/07/2014 o 14:29
źródło użytkownik

głosy
0

Te dni, jeśli używasz bootstrap, wystarczy podać swoje pola wprowadzania na form-controlklasę. Coś jak:

<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>
Odpowiedział 12/05/2018 o 17:35
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more