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

Question

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

397 10

css

10 ответов:

Comments

Ничего не найдено.

Rowno · Accepted Answer · 2012-12-07 00:42:08

просто использовать:
textarea {
    width: 200px;
}
или
input[type="text"] {
    width: 200px;
}
в зависимости от того, что вы подразумеваете под 'текстовое поле'.

Dan Herbert · Accepted Answer · 2011-09-15 23:55:34

код:
<input type="text" class="resizedTextbox" />
CSS:
.resizedTextbox {width: 100px; height: 20px}
имейте в виду, что размер текстового поля является "жертвой" модель коробки W3C. Я имею в виду, что высота и ширина текстового поля-это сумма свойств высоты/ширины, назначенных выше, в дополнение к высоте/ширине заполнения и ширине границы. По этой причине ваши текстовые поля будут немного отличаться по размеру в разных браузерах в зависимости от заполнения по умолчанию в разных браузерах броузеры. Хотя различные браузеры, как правило, определяют различные дополнения к текстовым полям, большинство сброс таблицы стилей не склонны включать <input /> теги в своих листах сброса, так что это то, что нужно иметь в виду.

вы можете стандартизировать это, определив свой собственный отступ. Вот ваш CSS с указанным заполнением, поэтому текстовое поле выглядит одинаково во всех браузерах:
.resizedTextbox {width: 100px; height: 20px; padding: 1px}
Я добавил 1 пиксель заполнения, потому что некоторые браузеры, как правило, делают текстовое поле выглядеть слишком переполнен, если заполнение составляет 0px. В зависимости от вашего дизайна, вы можете добавить еще больше отступов, но настоятельно рекомендуем вам определить отступы самостоятельно, иначе вы оставите его до разных браузеров, чтобы решить для себя. Для еще большей согласованности между браузерами, вы также должны определить границу самостоятельно.

tcao · Accepted Answer · 2012-02-27 10:19:09

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

10

2012-02-27 10:19:09

Lightsaber · Accepted Answer · 2013-07-05 22:02:39

ваш код текстового поля:
<input type="text" class="textboxclass" />
CSS код:
input[type="text"] {
height: 10px;
width: 80px;
}
или
.textboxclass {
height: 10px;
width: 80px;
}
Итак, сначала вы выбираете свой элемент с атрибутами(смотрите первый пример) или классы (смотрите последний пример). Позже вы назначаете значения высоты и ширины для вашего элемента.

joym8 · Accepted Answer · 2013-09-30 22:44:36

это работает для меня в IE 10 и FF 23
<input type="text" size="100" />

Johnny Vikrant · Accepted Answer · 2015-06-18 12:58:51

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

например. Я сделал форму в форме разд.

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; 
проблема решена.

Erol Balci · Accepted Answer · 2013-02-08 05:28:32

попробуй:
input[type="text"]{
padding:10px 0;}
таким образом, он остается независимым от того, какой textsize был установлен для текстового поля. Вы увеличиваете высоту с помощью заполнения вместо

madhab · Accepted Answer · 2013-03-15 07:53:32

попробуйте этот код :
input[type="text"]{
 padding:10px 0;}
таким образом, он остается независимым от того, какой textsize был установлен для текстового поля. Вы увеличиваете высоту, используя вместо этого прокладку.

Matchu · Accepted Answer · 2013-07-05 21:54:05

элементы могут быть размером с height и width атрибуты.

R Keene · Accepted Answer · 2016-05-20 21:56:23

шухере! Атрибут 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>