Как установить размер текстового поля HTML?
Как установить размер текстового поля HTML?
10 ответов
просто использовать:
textarea {
width: 200px;
}
или
input[type="text"] {
width: 200px;
}
в зависимости от того, что вы подразумеваете под "textbox".
код:
<input type="text" class="resizedTextbox" />
CSS-код:
.resizedTextbox {width: 100px; height: 20px}
имейте в виду, что размер текстового поля является "жертвой"W3C в коробке модель. Что я имею в виду под жертвой, так это то, что высота и ширина текстового поля-это сумма свойств высоты/ширины, назначенных выше, в дополнение к высоте/ширине заполнения и ширине границы. По этой причине ваши текстовые поля будут немного отличаться размерами в разных браузерах в зависимости от заполнения по умолчанию в разных браузерах броузеры. Хотя разные браузеры, как правило, определяют разные отступы в текстовые поля, большинство сброс таблицы стилей не имеют тенденцию включать <input />
теги в их листах сброса, так что это то, что нужно иметь в виду.
вы можете стандартизировать это, определив собственное дополнение. Вот ваш CSS с указанным заполнением, поэтому текстовое поле выглядит одинаково во всех браузерах:
.resizedTextbox {width: 100px; height: 20px; padding: 1px}
Я добавил 1 пиксельное заполнение, потому что некоторые браузеры, как правило, делают текстовое поле слишком если забиты обивка 0px. В зависимости от вашего дизайна вы можете добавить еще больше заполнения, но настоятельно рекомендуем вам определить заполнение самостоятельно, иначе вы оставите его до разных браузеров, чтобы решить для себя. Для еще большей согласованности между браузерами вы также должны сами определить границу.
код текстового поля:
<input type="text" class="textboxclass" />
CSS код:
input[type="text"] {
height: 10px;
width: 80px;
}
или
.textboxclass {
height: 10px;
width: 80px;
}
Итак, сначала вы выбираете свой элемент с атрибутами(посмотрите первый пример) или классы (посмотрите последний пример). Позже вы назначаете элементу значения высоты и ширины.
Если вы не хотите использовать метод class, вы можете использовать метод 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;
проблема решена.
попробуй:
input[type="text"]{
padding:10px 0;}
таким образом, он остается независимым от того, какой textsize был установлен для textbox. Вы увеличиваете высоту, используя заполнение вместо
попробуйте этот код :
input[type="text"]{
padding:10px 0;}
таким образом, он остается независимым от того, какой textsize был установлен для textbox. Вы увеличиваете высоту, используя вместо этого прокладку.
шухере! Атрибут 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>