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

Вопрос:

Лучший ответ:

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

textarea { width: 200px; }

или

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

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

Ответ №1

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

CSS:

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

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

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

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

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

Ответ №2input[type=»text»] { width:200px } Ответ №3

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

Ваш код CSS:

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

или

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

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

Ответ №4

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

<input type=»text» size=»100″ /> Ответ №5

Если вы не хотите использовать метод класса, вы можете использовать метод 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;

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

Ответ №6

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> Ответ №7

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

Ответ №8

Try:

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

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

Ответ №9

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

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

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

Ответ №10<form> <input type=»text» size=»35″><br> <!— you can add maxlenght too —> <input type=»text» maxlength=»4″ size=»4″><br> </form> Ответ №11

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

.container { width: 360px; } .container input { width: 100%; } Ответ №12

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