Як можна визначити розмір вхідного текстового поля в HTML?

90

Ось текстове поле вводу HTML:

<input type="text" id="text" name="text_name" />

Які варіанти можна визначити розмір коробки?

Як це можна реалізувати в CSS?

html css input

— osos
джерело

можливий дублікат Як встановити розмір текстового поля HTML?

— Тоні

У деяких випадках просто установка max-widthдосить

— Christophe Roussy

129

Ви можете встановити його width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

або навіть краще визначити клас:

<input type="text" id="text" name="text_name" class="mytext" />

і в окремому файлі CSS застосуйте необхідний стиль:

.mytext {
    width: 300px;
}

Якщо ви хочете обмежити кількість символів, які користувач може ввести в це текстове поле, ви можете використовувати maxlengthатрибут:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

— Дарін Димитров
джерело

11

також: ви можете змінити ширину з точки зору "em" (а не "px"), і тоді розмір пропорційний розміру шрифту текстового поля

— Alexander Bird

45

sizeАтрибут роботи, а також

<input size="25" type="text">

— Нечіткий аналіз
джерело

В яких одиницях цей атрибут розміру вимірюється нормально?

— Томас Кімбер

8

Спробуйте це

<input type="text" style="font-size:18pt;height:420px;width:200px;">

Інакше

 <input type="text" id="txtbox">

з css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

— Джанартанан Раму
джерело

3

Ваша відповідь не додає нічого нового, і ви повинні вказати одиниці (px, pt,% v тощо) у css

— Jon P

1

Ну - розмір шрифту (style = "font-size: 18pt") - той, який я шукав, і це також збільшує розмір коробки. Незважаючи на те, що це явно не запитано в OP, воно також додає вартості.

— Wolf5

Це спрацювало. Звідси велике спасибі. Однак текст, здається, центрується по вертикалі. Чи можу я це якось запобігти?

— Аарон Джон Сабу

@AaronJohnSabu Вибачте за затримку .. Спробуйте збільшити розмір ширини .. сподіваюся, ви вже знайшли відповідь ..

— Janarthanan Ramu

3

Ви можете встановити ширину в пікселях за допомогою вбудованого стилю:

<input type="text" name="text" style="width: 195px;">

Ви також можете встановити ширину з видимою довжиною символу:

<input type="text" name="text" size="35">

— betrice mpalanzi
джерело

-2

<input size="45" type="text" name="name">

"Розмір" визначає видиму ширину в символах введення елемента.

Ви також можете використовувати висоту та ширину з css.

<input type="text" name="name" style="height:100px; width:300px;">

— Даніель дос Сантос
джерело