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

Question

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

Answer 1

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

textarea {
    width: 200px;
}

или

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

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

Answer 2

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

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

CSS:

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

Имейте в виду, что размер текстового поля является «жертвой» модели коробки W3C . Под жертвой я подразумеваю, что высота и ширина текстового поля - это сумма свойств высоты / ширины, назначенных выше, в дополнение к высоте / ширине отступа и ширине границы. По этой причине ваши текстовые поля будут немного отличаться по размеру в разных браузерах в зависимости от заполнения по умолчанию в разных браузерах. Хотя разные браузеры обычно определяют разные отступы для текстовых полей, большинство таблиц стилей сброса не склонны включать теги <input /> в свои таблицы сброса, так что об этом следует помнить.

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

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

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

Answer 3

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

Answer 4

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

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

Ваш CSS-код:

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

или

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

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

Answer 5

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

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

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

Answer 7

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

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

Answer 8

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

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

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

Answer 9

Попробуйте:

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

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

Answer 10

Размер элементов можно определить с помощью атрибутов height и width.