Почему <textarea> и <textfield> не берут семейство шрифтов и размер шрифта из тела?

118

Почему 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 {....}?

css xhtml

— Джитендра Вьяс
источник

76

По умолчанию браузеры отображают большинство элементов формы (текстовые поля, текстовые поля, кнопки и т. Д.) С помощью элементов управления ОС или элементов управления браузера. Таким образом, большинство свойств шрифта взяты из темы, которую в настоящее время использует ОС.

Вам нужно будет настроить таргетинг на сами элементы формы, если вы хотите изменить их стили шрифта / текста - это должно быть достаточно легко, выбрав их, как вы только что сделали.

Насколько мне известно, затрагиваются только элементы формы. С верхней части моей головы: input, button, textarea, select.

— BoltClock
источник

32

Самый прямой выход, если такое поведение нежелательно, - добавить к вашим стилям файлы textarea, input, button, select { font-family: inherit; font-size: inherit; }.

— Деввин

@Devvyn, вы должны добавить, text-align: inheritпотому что текст кнопок часто выравнивается по центру.

— Джошуа Мухейм

Как мне сделать наоборот, иначе говоря, использовать этот шрифт ОС для всей моей веб-страницы / тела?

— Agirault

@agirault, вы можете сделать что-то вроде этого: body {font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans "," Helvetica Neue "," Helvetica "," Arial ", без засечек; }

— getup8

149

Некоторые элементы управления не наследуют настройки шрифта по умолчанию. Вы можете переопределить это, поместив это в свой CSS:

textarea {
   font-family: inherit;
   font-size: inherit;
}

— spoulson
источник

4

IE до версии 8 не поддерживает наследование, поэтому это не сработает.

— DisgruntledGoat

6

Я думаю, что это только кроссбраузерное решение для определения каждого элементаbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— Джитендра Вьяс

1

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

— Споулсон

К сожалению, хром (версия 59.0.3071.115) не применяет размер шрифта: наследование; без указания семейства шрифтов.

— Ondrej

font-weight: inherit;пропал, отсутствует.

— ceving

10

Все браузеры имеют встроенные таблицы стилей по умолчанию. Вот почему, когда вы создаете страницу без каких-либо определенных стилей, <h1>теги большие и полужирные, а <strong>текст выделяется жирным шрифтом. Точно так же, стили шрифтов , <input>и <textarea>элементы определены в стилях по умолчанию.

Чтобы увидеть эту таблицу стилей в Firefox, введите ее в адресную строку: resource://gre/res/forms.css

В любом случае, вы должны переопределить эти стили, как и любые другие стили, как в последнем примере.

Если вам интересно, какие еще стили определены, просмотрите файлы CSS в своих ресурсах. Вы можете получить к ним доступ через URL-адрес выше или заглянув в свою resпапку в каталоге firefox (например:) c:\program files\mozilla firefox\res. Вот те, которые могут влиять на стили обычных страниц:

html.css
forms.css
quirk.css
ua.css

— nickf
источник

но <h1> берет стиль шрифта, <body>но <textarea>не берет

— Джитендра Вьяс

3

Стили для h1не определяют шрифт, поэтому ваши bodyстили имеют приоритет. Стили для inputдействительно определяют стиль, и он более конкретен, чем ваш селектор, поэтому он выигрывает.

— nickf

+1 за ваш комментарий. Я не знал. вы имеете в виду, что некоторые элементы имеют определенный стиль по умолчанию в браузере и не могут быть отменены телом {....}

— Джитендра Вьяс

1

Я думаю, он имеет в виду, что некоторые элементы более специфичны, чем другие в DOM, или имеют меньшую область действия. Поскольку текстовое поле существует внутри тела, любой стиль, определенный для текстового поля, перезапишет стили тела {}. Таким образом, стиль текстового поля FF по умолчанию перезаписывает ваш стиль тела, даже если ваш стиль определен позже (обычно что-то более новое имеет приоритет, но не в более широком / менее конкретном случае).

— user1072406
источник

0

Я пробовал всевозможные уловки, чтобы остановить текстовое поле на мобильном устройстве, используя шрифт гораздо большего размера, чем обычный текст. Кажется, что когда мое текстовое поле было cols = "45", шрифт был нормальным, но как только он был увеличен до cols = "71", даже при том, что он остался внутри тегов td, шрифт стал больше.

На странице Mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) я нашел это

textarea {
   text-size-adjust: none;
}

Мне кажется, это лучший ответ. Он работает на ПК, планшете и, самое главное, на моем телефоне Android.

— Брайан Джонс
источник