Cross Browser ширина поля ввода стилизации

У меня есть форма ввода доставки/выставления счетов и у меня возникают проблемы с моделированием полей ввода, чтобы иметь одинаковую ширину ...Cross Browser ширина поля ввода стилизации

Проблема:
-a поле <input type="text" size="X" />, как представляется, рендеринг с различными размерами в разных браузерах (см. link).
-Кроме того, поля, по-видимому, отображаются и по-другому.
-Chrome/safari, похоже, не отвечают на свойство font-size для выбранных полей.

Любое руководство по стилизации размера ввода текста и выбора полей кросс-браузера было бы очень полезно.

Должен ли я привести к тому, что у каждого браузера будет другой ситшет, только для этих полей ввода? -thanks

источник

2010-03-16 Derek Adair

Удалите этот встроенный атрибут «размер», в первую очередь. Вы должны использовать CSS для стилизации формы ввода:

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

    /* You can also style padding, margins and everything else, 
    * just remember that inputs of type "text" can only be one line. 
    */ 
}

Не используйте [тип = «текст»] в качестве селектора. Я просто использовал его в этом примере, чтобы связать с полями ввода типа «текст», но он не полностью поддерживается кросс-браузером. Вы должны предоставить свои поля ввода текста своему классу для стилизации.

Кроме того, не забудьте перезагрузить CSS, чтобы убедиться, что ваши поля, границы и т.д. и др. сбрасываются для всех браузеров. http://meyerweb.com/eric/tools/css/reset/

источник

2010-03-16 16:58:49 dclowd9901

На самом деле, используя сброс эйер-мейера и стилизацию ширины с помощью CSS, как вы объяснили, не все поля ввода имеют одинаковую ширину при сравнении webkit с IE7 -> IE9 –

По моему опыту , это перерывы. Например, существует много ошибок при использовании модели с ящиками: как установить поле ввода в 100% ширину его родительского поля. Обычно вы достигаете этого, устанавливая родительское поле на 100% ширину, затем устанавливая параметры поля или заполнения внутреннего блока, но поскольку поля ввода являются автономными, нет способа создать на любой платформе способ чтобы последовательно привязывать ширину текстового поля к родительскому контейнеру (а не к тому, что другой метод является чистым или семантическим). В идеале, поля и поля должны иметь определение внешней ширины. – dclowd9901

Этот ответ не обеспечивает согласованного выбора полей ввода. Он имеет ценную информацию, но не отвечает на вопрос. – BishopZ

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

К сожалению, до сих пор не представляется возможным написать:

input[size] { 
    width: attr(size) "ch"; 
}

Таким образом, мы должны стиль ширин мы знаем мы будем использовать:

input[size="10"] {width: 10ch;} 
input[size="20"] {width: 20ch;} 
input[size="30"] {width: 30ch;} 
/* etc. */

Это может быть легко автоматизирована с использованием препроцессор CSS.

UPDATE:

Я сделал test fiddle. На сегодняшний день (февраль 2018) это работает на Windows 10 с Chrome 63, Edge 41, FF 58. В IE 11 он терпит неудачу. Я не пробовал OS X.

источник

2016-07-15 09:50:31 xfra35

Слишком плохо «ch» на самом деле не работает для размера ввода. Например.с моноширинным шрифтом, чтобы получить поле ввода, показывающее 30 символов, в IE мне нужно установить 37ch и на Chrome 33ch. По-моему, это бесполезно. – user9645

Я сделал [пробную скрипту] (https://jsfiddle.net/bujr1d94/1/). В Windows 10 это работает с Chrome 63, Edge 41, FF 58. В IE 11 он терпит неудачу. Я не пробовал OS X. – xfra35

Cross Browser ширина поля ввода стилизации

ответ

Смежные вопросы