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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

Все браузеры имеют встроенные таблицы стилей по умолчанию. Поэтому, когда вы создаете страницу без каких-либо определенных стилей, теги <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

Ответ 4

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