Что делать с input'ами?

В процессе вёрстки долгое время мучился, но в итоге уже не выдержал, прошу помощи у сообщества.

Проблема в разметке input type="text" под Chrome (не знаю насчёт остальных браузеров, по техническим причинам пока не могу проверить).

По умолчанию в браузере input содержит какие-то разные загадочные стили, в итоге на указание размеров или получение размера реагирует довольно неадекватно.
66cea7efb578eb629d5bdf2eb46e0020.png

На изображении всем трём элементам выставлена одинаковая ширина. Проблемы только с обычным текстовым полем. И это реально бесит. Если что, последний элемент – сборный, размер выставлен контейнеру.

Вот этот JSFiddle выглядит вот так:
364f72b2e86108d655c96a340025de91.png

Нужно же, чтобы правые границы тоже совпадали.

Внимание, вопрос. Что делать[, и можно ли что-то сделать вообще]? Нужно, чтобы внешний вид остался таким же, остались такими же padding и margin (не критично, но желательно), чтобы изменения не повлияли на поведение в остальных браузерах, но чтобы элемент можно было нормально поместить в разметку и стилизировать.
  • Вопрос задан
  • 4333 просмотра
Пригласить эксперта
Ответы на вопрос 2
@igoravr
CSS свойство box-sizing поможет: jsfiddle.net/rnG4w/1/
Ответ написан
Комментировать
Keyten
@Keyten
И да… про padding-и тоже не забывайте)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы