Как установить размер текстового поля 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; 

Задача решена.

Быть осторожным! Атрибут ширины обрезается атрибутом 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%;
}