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

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

Просто використовуйте:

textarea {
    width: 200px;
}

або

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

Залежно від того, що ви маєте на увазі під «текстовим полем».

Ваша розмітка:

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

CSS:

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

Майте на увазі, що розмір текстового поля є «жертвою» моделі вікна W3C . Що я маю на увазі під жертвою, це те, що висота та ширина текстового поля є сумою властивостей висоти / ширини, призначених вище, крім висоти / ширини прокладки та ширини рамки. З цієї причини ваші текстові поля будуть дещо різними розмірами в різних браузерах, залежно від прокладки за замовчуванням у різних браузерах. Хоча різні веб-переглядачі, як правило, визначають різні текстові поля в текстових полях, більшість аркушів стилів скидання зазвичай не включають <input />теги у свої аркуші скидання, тому це потрібно пам’ятати.

Ви можете це стандартизувати, визначивши власну прокладку. Ось ваш CSS із заданими прокладками, тому текстове поле виглядає однаково у всіх браузерах:

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

Я додав накладку в 1 піксель, оскільки деякі браузери, як правило, роблять текстове поле занадто забитим, якщо накладка дорівнює 0 пікселів. Залежно від вашого дизайну, ви можете додати ще більше прокладки, але настійно рекомендуємо визначити прокладку самостійно, інакше ви будете залишати її іншим браузерам, щоб вирішити самі. Для ще більшої узгодженості у веб-переглядачах ви також повинні самі визначати межу.

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

Ваш текстовий код:

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

Ваш CSS-код:

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

або

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

Отже, спочатку вибираєте свій елемент з атрибутами (подивіться перший приклад) або класами (подивіться останній приклад). Пізніше ви призначите елементу значення висоти та ширини.

Це працює для мене в IE 10 та FF 23

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

Якщо ви не хочете використовувати метод класу, ви можете скористатися методом «батько-дитина» для внесення змін у текстове поле.

Наприклад, наприклад. Я зробив форму у своїй формі div.

HTML-код:

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

Тепер CSS-код буде таким:

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

Проблема вирішена.

Огляньте! Атрибут width відсікається атрибутом max-width. Тому я використав….

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

Спробуйте:

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

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

Спробуйте цей код:

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

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

Елементи можна розміщувати за допомогою атрибутів heightта widthатрибутів.

Ви можете зробити залежну вхідну ширину від ширини контейнера.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}