Как сделать текстовое поле и текстовую область одинаковой ширины кросс-браузерами?

Question

Установка ширины текстового поля (т. Е. Input type = "text") и текстового поля в 500px не работает в IE6 и Chrome, хорошо работает только в FF2 (не тестировал другие браузеры), IE и Chrome добавляет два пикселя в текстовое поле.

Заполнение и поле установлены на 0 для всех элементов, используя

*
{
margin: 0px;
padding: 0px;
}

Изменение типа документа с переходного периода xhtml 1.0 на строгий тоже не сработало.

Answer 1

Вам нужно явно установить границу 1px и сделать ширину 498px, или сделать границу 0 и ширину 500px, хотя последнее сделает ввод невозможным для просмотра, если вы не знаете, что он там, поэтому оттуда это просто вопрос стайлинга.

Answer 2

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

Эрик Мейер (один из лучших специалистов по CSS) описывает стили сброса и почему он их использует здесь - со своей последней версией здесь .

Тем не менее, не зная общего эффекта, которого вы пытаетесь достичь, элементы форм, как известно, сложно стилизовать так, чтобы они были абсолютно согласованными на разных платформах браузеров. Удачи. :)

Answer 3

Я использую CSS3, чтобы текстовое поле и ввод работали одинаково. См. JsFiddle .

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

Работает в IE8 +, см. Caniuse .

Answer 4

Я экспериментировал и обнаружил, что «соотношение» между вводом текста и текстовой областью можно рассчитать, используя 21 * 8 * x.

Если у вас есть

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

если x = 70, то 21 * 8 * 70 = 581px

Итак, вы напишите:

Два станут равными!

Таким образом, в программе / веб-сайте / и т. Д. Вы можете ввести одно и то же значение и получить тот же результат (столбцы в текстовой области)!

Answer 5

Я бы порекомендовал сначала избежать этого «звездного» правила сброса, так как оно только приводит к проблемам в будущем. Вместо этого предпочитайте конкретный сброс, например

ul, ol, p, blockquote, h1, h2 /etc.../ {margin: 0; обивка: 0; }

ФОРМОВЫЕ ЭЛЕМЕНТЫ, в действительности, именно там правило звезды наносит наибольший урон.

AFAIK, явно задавая отступ и ширину для текстовой области и элемента ввода, даст одинаковую ширину пикселя во всех браузерах.

IE6 добавляет 1px поле в ТОП и ВНИЗ, я полагаю, а не в стороны.

Вот пример правила RESET, которое не нарушает стандартные свойства элементов формы:

/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/

body { 
    font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif; 
    margin:0; padding:0; 
    background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
    color:#303030;
}

p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }

/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }

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

Answer 6

Я тоже думаю, что проблема в границе. Попробуйте определить стиль рамки специально для input / textarea вместе с их шириной.

input, textarea { рамка: 1px сплошная серая; ширина: 498px; }

Также обратите внимание на источник, если input / textarea не определено где-либо еще или в их собственном теге (например, размер или строки / столбцы). Другой вариант, когда IE возится, использует для этого специальный файл CSS. Однако ИМХО это не должно быть необходимо в вашем случае.

Answer 7

<!--***********************CSS**************************-->
<style>

.set_font

{

font-family:verdana;

font-size:10px;

color:#ffffff;

width:250px;

}

.set_font2

{

font-family:verdana;

font-size:10px;

color:#000000;

width:250px;

}
</style>
<!--*******************HTML**************************-->
<input type="text" size="33" class="set_font2" name="inputName" id="inputName" value="inputValue" maxlength="50">
<textarea cols="30" rows="8" class="set_font2" name="inputName" id="inputName">inputValue</textarea>

Answer 8

Попробуйте

input{
border:none;
}