Как установить размер текстового поля HTML?

Ответ 1

Просто используйте:

textarea {
    width: 200px;
}

или

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

В зависимости от того, что вы подразумеваете под "текстовым полем".

Ответ 2

Ваша разметка:

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

CSS:

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

Имейте в виду, что размер текстового поля является "жертвой" reset таблиц стилей не включают теги <input /> в своих reset, так что это то, что нужно иметь в виду.

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

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

Я добавил 1 пиксельное дополнение, потому что некоторые браузеры, как правило, делают текстовое поле слишком забитым, если заполнение равно 0px. В зависимости от вашего дизайна вы можете захотеть добавить еще больше дополнений, но очень рекомендую вам сами определять дополнение, иначе вы оставите его в разных браузерах, чтобы сами решить. Для большей согласованности между браузерами вы также должны определить границу самостоятельно.

Ответ 3

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

Ответ 4

Код вашего текста:

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

Ваш код CSS:

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

или

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

Итак, сначала вы выбираете свой элемент с атрибутами (смотрите первый пример) или классы (смотрите последний пример). Позже вы назначаете значения высоты и ширины вашему элементу.

Ответ 5

Это работает для меня в IE 10 и FF 23

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

Ответ 6

Если вы не хотите использовать метод класса, вы можете использовать метод parent-child для внесения изменений в текстовое поле.

Например, Я сделал форму в моей форме 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;

Проблема решена.

Ответ 7

Lookout! Атрибут 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>

Ответ 8

Элементы могут быть отсортированы с помощью height и width.

Ответ 9

Try:

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

Таким образом, он не зависит от того, какой текст был установлен для текстового поля. Вы увеличиваете высоту с помощью дополнения вместо

Ответ 10

Попробуйте этот код:

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

Таким образом, он не зависит от того, какой текст был установлен для текстового поля. Вместо этого вы увеличиваете высоту с помощью дополнения.

Ответ 11

<form>
  <input type="text"  size="35"><br>
  <!-- you can add maxlenght too -->
 <input type="text"  maxlength="4" size="4"><br>
</form>

Ответ 12

Вы можете сделать зависимую ширину ввода от ширины контейнера.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}

Ответ 13

Если вы хотите ограничить число букв в текстовом поле: maxlength = "10" внутри тега ввода