Задать вопрос
iFrolov
@iFrolov
html

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.
  • Вопрос задан
  • 5853 просмотра
Комментировать
Подписаться 5 Оценить Комментировать
Решения вопроса 1
Riateche
@Riateche
Долго бился над вашей задачей, но так ничего и не придумал. Судя по всему, этот дополнительный пиксель предназначен для того, чтобы мигающий курсор поместился между первой буквой и краем поля.

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Менеджер по продажам в онлайн-школу
17 апр. 2024, в 00:48
35000 руб./за проект
Сделать картинки для слов
17 апр. 2024, в 00:13
800 руб./за проект
Разработка backend python+django
17 апр. 2024, в 00:06
240000 руб./за проект
Ещё заказы