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

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

Можно решить это проблему, прописав отдельно стили для неправильных браузеров. Например, так — некрасиво, зато работает (в хроме, фф и опере проверил).
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
ccartrec
@ccartrec
web
У 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;
}
Ответ написан
Комментировать
Sekira
@Sekira
Можно наоборот использовать вместо div input, примерно так: добавить атрибут readonly и стиль cursor: default;
Ответ написан
iFrolov
@iFrolov Автор вопроса
Можно, но в рамках поставленной задачи — не пойдет. Суть в том, что нужно отображать раскрашенный разными цветами текст внутри текстбокса, после того как пользователь убирает с него фокус. Именно разными так что первое слово синее, второе красное, и т.д. Поскольку input не может внутри себя иметь разметку, элемент подменяется на div с размеченным введенным текстом.
Ответ написан
Я вижу только один выход, подключать по user_agent разные стили, больше в голову ничего не идет, но это решение для искушенных перфекционистов.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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