Чому <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; }.

— Девин

@ Деввін, слід додати, text-align: inheritоскільки тексти кнопок часто вирівнюються по центру.

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

Як я можу зробити навпаки, так само використовувати цей шрифт ОС для всієї своєї веб-сторінки / тіла?

— agirault

@agirault можна зробити щось подібне: body {family-font: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans "," Helvetica Neue "," Helvetica "," Arial ", sans-serif; }

— getup8

149

Деякі елементи керування не мають значень для успадкування налаштувань шрифту. Ви можете змінити це, розмістивши це у своєму CSS:

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

— подружжя
джерело

4

IE до версії 8 не підтримує успадкування, тому це не буде працювати.

— НезадоволенняГота

6

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

— Jitendra Vyas

1

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

— подружжя

Unfortunatelly chrome (версія 59.0.3071.115) не застосовує розмір шрифту: nasledit; без зазначення сімейства шрифтів.

— Ондрей

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
form.css
quirk.css
ua.css

— нікф
джерело

але <h1> <body><textarea>

— починає стилізувати

3

Стилі h1не визначають шрифт, тому ваші bodyстилі мають перевагу. Стилі для inputdo визначають стиль, і він більш конкретний, ніж ваш вибір, тому він виграє.

— nickf

+1 для вашого коментаря. Я не знав. ви маєте на увазі, що деякі елементи мають за замовчуванням специфічний стиль у веб-переглядачі, і його не можна переохочувати тілом {....}

— Jitendra Vyas

1

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

— user1072406
джерело

0

Я спробував усілякі хитрощі, щоб зупинити textarea в мобільному, використовуючи набагато більший шрифт, ніж звичайний текст. Здається, що коли у моєї textarea було cols = "45", шрифт був нормальним, але як тільки він був піднятий до cols = "71", навіть якщо він залишився всередині тегів td, шрифт зростав великим.

На сторінці mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) я знайшов це

textarea {
   text-size-adjust: none;
}

Здається, це найкраща відповідь для мене. Він працює на ПК, планшеті та, що найголовніше, на моєму телефоні Android.

— Брайан Джонс
джерело