Как сделать текстовые поля и текстовые поля одинаковой ширины?

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

input, textarea { граница: 1px сплошной серый; ширина: 498px; }

Также посмотрите в источнике, если input/textarea не определены нигде или в их собственном теге (например, size или rows/cols). Другой вариант, когда IE беспорядочно использует специальный файл css для него. Однако имхо не нужно в вашем случае.

Ответ 5

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

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

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

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

IE6 добавляет 1px margin к TOP и BOTTOM, я верю, а не к сторонам.

Здесь пример правила reset taht does'nt нарушает свойства по умолчанию элементов формы:

/*---------------------------*/
/* 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; }

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

Ответ 6

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

Если у вас

< input type = "text" size = "X" / " > < бр /" > < textarea cols = "X" > </TextArea>

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

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

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

< input type = "text" size = "70" style = "width: 581px" / " > < br/" > < TextArea смещ_по_столбцы = "70" > </TextArea>

Оба станут равными!

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

Ответ 7

Try

input{
border:none;
}

Ответ 8

<!--***********************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>