Jak ustawić rozmiar pola tekstowego HTML?

Jak ustawić rozmiar pola tekstowego HTML?

Po prostu użyj:

textarea {
    width: 200px;
}

lub

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

W zależności od tego, co masz na myśli przez „pole tekstowe”.

Twoje znaczniki:

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

CSS:

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

Należy pamiętać, że rozmiar pola tekstowego jest „ofiarą” modelu ramki W3C . Przez ofiarę mam na myśli to, że wysokość i szerokość pola tekstowego to suma właściwości wysokości / szerokości przypisanych powyżej, oprócz wysokości / szerokości dopełnienia i szerokości obramowania. Z tego powodu pola tekstowe będą miały nieco inny rozmiar w różnych przeglądarkach, w zależności od domyślnego wypełnienia w różnych przeglądarkach. Chociaż różne przeglądarki mają tendencję do definiowania różnych dopełnień pól tekstowych, większość resetowanych arkuszy stylów nie zawiera <input />znaczników w arkuszach resetowania, więc warto o tym pamiętać.

Możesz to ujednolicić, definiując własne wypełnienie. Oto twój CSS z określonym dopełnieniem, więc pole tekstowe wygląda tak samo we wszystkich przeglądarkach:

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

Dodałem 1 piksel wypełnienia, ponieważ niektóre przeglądarki sprawiają, że pole tekstowe wygląda na zbyt zapchane, jeśli wypełnienie wynosi 0 pikseli. W zależności od projektu możesz chcieć dodać jeszcze więcej wypełnienia, ale zdecydowanie zalecamy samodzielne zdefiniowanie wypełnienia, w przeciwnym razie pozostawisz to różnym przeglądarkom, aby zdecydowały same. Aby uzyskać jeszcze większą spójność między przeglądarkami, należy również samodzielnie zdefiniować granicę.

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

Twój kod pola tekstowego:

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

Twój kod CSS:

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

lub

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

Zatem najpierw wybierasz element z atrybutami (patrz pierwszy przykład) lub klasami (patrz ostatni przykład). Później przypisujesz wartości wysokości i szerokości do elementu.

To działa dla mnie w IE 10 i FF 23

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

Jeśli nie chcesz używać metody klasy, możesz użyć metody rodzic-dziecko, aby wprowadzić zmiany w polu tekstowym.

Np. Zrobiłem formularz w mojej postaci div.

Kod HTML:

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

Teraz kod CSS będzie wyglądał następująco:

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

Problem rozwiązany.

Uważaj! Atrybut szerokości jest obcinany przez atrybut max-width. Więc użyłem ....

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

Próbować:

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

W ten sposób pozostaje niezależne od tego, jaki rozmiar tekstu został ustawiony dla pola tekstowego. Zamiast tego zwiększasz wysokość za pomocą wypełnienia

Wypróbuj ten kod:

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

W ten sposób pozostaje niezależne od tego, jaki rozmiar tekstu został ustawiony dla pola tekstowego. Zamiast tego zwiększasz wysokość za pomocą wypełnienia.

Elementy można zmieniać za pomocą atrybutów heighti width.

Możesz ustawić zależną szerokość wejściową względem szerokości kontenera.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}