Почему <textarea>и <textfield>не принимают семейство шрифтов и размер шрифта из основного текста? - PullRequest
105 голосов
/ 20 мая 2010

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

Ответы [ 4 ]

134 голосов
/ 20 мая 2010

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

textarea {
   font-family: inherit;
   font-size: inherit;
}
66 голосов
/ 20 мая 2010

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

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

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

10 голосов
/ 20 мая 2010

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

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

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

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

  • html.css
  • forms.css
  • quirk.css
  • ua.css
1 голос
/ 23 января 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...