Почему Textareaи textfieldне взяли font-familyи font-sizeиз тела?
См. Живой пример здесь http://jsbin.com/ucano4
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>texearea font</title>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
font-size:16px
}
</style>
</head>
<body>
<form action="" method="get">
<textarea name="" cols="20" rows="4"></textarea>
<input name="" type="text" />
</form>
<p>some text here</p>
</body>
</html>
Если это обычное поведение, мне следует писать в CSS вот так. мне нужен один и тот же стиль во всем
body,textarea,input {
font-family: Verdana, Geneva, sans-serif;
font-size:16px
}
А сколько других элементов в XHTML не будет использовать стиль шрифта body {....}?
textarea, input, button, select { font-family: inherit; font-size: inherit; }.text-align: inheritпотому что текст кнопок часто выравнивается по центру.Некоторые элементы управления не наследуют настройки шрифта по умолчанию. Вы можете переопределить это, поместив это в свой CSS:
источник
body, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }inheritподход.font-weight: inherit;пропал, отсутствует.Все браузеры имеют встроенные таблицы стилей по умолчанию. Вот почему, когда вы создаете страницу без каких-либо определенных стилей,
<h1>теги большие и полужирные, а<strong>текст выделяется жирным шрифтом. Точно так же, стили шрифтов ,<input>и<textarea>элементы определены в стилях по умолчанию.Чтобы увидеть эту таблицу стилей в Firefox, введите ее в адресную строку:
resource://gre/res/forms.cssВ любом случае, вы должны переопределить эти стили, как и любые другие стили, как в последнем примере.
Если вам интересно, какие еще стили определены, просмотрите файлы CSS в своих ресурсах. Вы можете получить к ним доступ через URL-адрес выше или заглянув в свою
resпапку в каталоге firefox (например:)c:\program files\mozilla firefox\res. Вот те, которые могут влиять на стили обычных страниц:источник
<body>но<textarea>не беретh1не определяют шрифт, поэтому вашиbodyстили имеют приоритет. Стили дляinputдействительно определяют стиль, и он более конкретен, чем ваш селектор, поэтому он выигрывает.Я думаю, он имеет в виду, что некоторые элементы более специфичны, чем другие в DOM, или имеют меньшую область действия. Поскольку текстовое поле существует внутри тела, любой стиль, определенный для текстового поля, перезапишет стили тела {}. Таким образом, стиль текстового поля FF по умолчанию перезаписывает ваш стиль тела, даже если ваш стиль определен позже (обычно что-то более новое имеет приоритет, но не в более широком / менее конкретном случае).
источник
Я пробовал всевозможные уловки, чтобы остановить текстовое поле на мобильном устройстве, используя шрифт гораздо большего размера, чем обычный текст. Кажется, что когда мое текстовое поле было cols = "45", шрифт был нормальным, но как только он был увеличен до cols = "71", даже при том, что он остался внутри тегов td, шрифт стал больше.
На странице Mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) я нашел это
Мне кажется, это лучший ответ. Он работает на ПК, планшете и, самое главное, на моем телефоне Android.
источник