@someden

Почему textarea отличается по ширине от input в браузерах на движке Webkit?

Для input и textarea в css задал все одинаковое и падинги и марджины, бордер, шрифты и т.д.
Но все равно textarea cols='30' больше по ширине чем input size='30' в хроме, сафаре и опере. Только в фаерфоксе все ок.
Почему так происходит? Есть ли способ это исправить не прописывая width?
3b0ed4156d6b47b9aea6eb139777bf06.png
  • Вопрос задан
  • 3646 просмотров
Пригласить эксперта
Ответы на вопрос 4
@bromzh
Drugs-driven development
Потому что у textarea есть внутренние отступы. А по-умолчанию они добавляются к заданному размеру элемента. Добавь для textarea в css свойство box-sizing: border-box;
Вот ещё хорошая ссылка для ознакомления: www.w3schools.com/css/css_boxmodel.asp
Ответ написан
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Никогда не задумывался на эту тему, но судя по описанию -
htmlbook.ru/html/input/size
htmlbook.ru/html/textarea/cols
одно и тоже.

Меня больше интересовала вот эта строка -
Ширина текстового поля, которое определяется числом символов моноширинного шрифта.

Попробовал у textarea задизайблить monospace шрифт, но толку ноль.
Ответ написан
Комментировать
@Lev_Shestov
На StackOverflow приводится такое решение проблемы:

input, textarea{
font-family: Arial, sans-serif;
font-size: 100%;
width: 26em; /* fallback for the next one, for browsers not recognizing ch */
width: 40ch; /* sets the width to 40 times the width of the digit “0” */
}

Не знаю, насколько это допустимый вариант, но мою проблему решил.

ссылка: stackoverflow.com/questions/18908018/why-do-textar...
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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