Chrome и Firefox добавляют лишний padding у input. Почему?

Question

[iFrolov]

Стоит задача смимикрировать input[type=text] div'ом. Все стили прописаны одинаково. Инспектор в конечном стиле не показывает ни единого различия.
jsfiddle.net/yWqYz/1/ — здесь можно видеть эти элементы. Если приглядеться, видно что у input имеется горизонтальный отступ в 1px.
Становится особенно некрасиво, когда эти элементы динамически подменяют друг друга — jsfiddle.net/yWqYz/2/ — текст прыгает туда-сюда.
Вопрос 1: почему.
Вопрос 2: как это обойти. Вариант добавить padding в div не вариант — поедет в Opera и IE.

Answer 1

[Riateche]

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

Можно решить это проблему, прописав отдельно стили для неправильных браузеров. Например, так — некрасиво, зато работает (в хроме, фф и опере проверил).

Comments

[venn]

Еще можно так. Тогда не придется играть с шириной элемента из-за добавления паддинга.

Answer 2

[Александр]

У FireFox эта область зарезервирована под выделение. Можно убрать так:

button::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
input[type=button]::-moz-focus-inner {
padding: 0;
border: 0;
}

Answer 3

[Sekira]

Можно наоборот использовать вместо div input, примерно так: добавить атрибут readonly и стиль cursor: default;

Comments

[iFrolov]

Промахнулся. Ответ здесь — habrahabr.ru/qa/15626/#answer_65090

Answer 4

[iFrolov]

Можно, но в рамках поставленной задачи — не пойдет. Суть в том, что нужно отображать раскрашенный разными цветами текст внутри текстбокса, после того как пользователь убирает с него фокус. Именно разными так что первое слово синее, второе красное, и т.д. Поскольку input не может внутри себя иметь разметку, элемент подменяется на div с размеченным введенным текстом.

Comments

[Reey]

а contenteditable не подойдет?

Answer 5

[Александр Курганов]

Я вижу только один выход, подключать по user_agent разные стили, больше в голову ничего не идет, но это решение для искушенных перфекционистов.