Tại sao <textareosystem và <textfield> không lấy font-family và font-size từ phần thân?

118

Tại sao Textareavà textfieldkhông lấy font-familyvà font-sizetừ cơ thể?

Xem ví dụ trực tiếp tại đây http://jsbin.com/ucano4

Mã

        <!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>

Nếu đó là một hành vi thông thường thì tôi có nên viết bằng css như thế này không. tôi cần cùng một phong cách

body,textarea,input  {
                font-family: Verdana, Geneva, sans-serif;
                font-size:16px
            }

Và có bao nhiêu phần tử khác trong XHTML sẽ không tạo kiểu phông chữ body {....}?

css xhtml

— Jitendra Vyas
nguồn

76

Theo mặc định, các trình duyệt hiển thị hầu hết các thành phần biểu mẫu (văn bản, hộp văn bản, nút, v.v.) bằng cách sử dụng điều khiển hệ điều hành hoặc điều khiển trình duyệt. Vì vậy, hầu hết các thuộc tính phông chữ được lấy từ chủ đề mà hệ điều hành hiện đang sử dụng.

Bạn sẽ phải tự nhắm mục tiêu các thành phần biểu mẫu nếu bạn muốn thay đổi kiểu phông chữ / văn bản của chúng - mặc dù vậy, phải đủ dễ dàng bằng cách chọn chúng, như bạn vừa làm.

Theo như tôi biết, chỉ các yếu tố hình thức bị ảnh hưởng. Off đỉnh đầu của tôi: input, button, textarea, select.

— BoltClock
nguồn

32

Biện pháp khắc phục trực tiếp nhất nếu hành vi này là không mong muốn là thêm vào phong cách của bạn , textarea, input, button, select { font-family: inherit; font-size: inherit; }.

— Devvyn

@Devvyn, bạn nên thêm text-align: inheritvì văn bản của các nút thường được căn ở giữa.

— Joshua Muheim,

Làm cách nào để làm ngược lại, hay còn gọi là sử dụng phông chữ hệ điều hành đó cho toàn bộ trang web / nội dung của tôi?

— agirault

@agirault, bạn có thể làm như sau: body {font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans "," Helvetica Neue "," Helvetica "," Arial ", sans-serif; }

— getup

149

Một số điều khiển không được đặt mặc định để kế thừa cài đặt phông chữ. Bạn có thể ghi đè điều này bằng cách đặt nó trong CSS của bạn:

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

— spoulson
nguồn

4

IE trước phiên bản 8 không hỗ trợ kế thừa, vì vậy điều đó sẽ không hoạt động.

— DisgruntledGoat

6

Tôi nghĩ rằng đây chỉ là giải pháp trình duyệt chéo để xác định mọi phần tửbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— Jitendra Vyas

1

Tôi đồng ý, cách tiếp cận đó thực tế hơn. Tôi chỉ muốn chứng minh hành vi mà bạn đang thấy bằng cách sử dụng inheritphương pháp này.

— spoulson

Không may, chrome (phiên bản 59.0.3071.115) không áp dụng font-size: inherit; mà không chỉ định font-family.

— Ondrej

font-weight: inherit;bị mất tích.

— thúc

10

Tất cả các trình duyệt đều có sẵn các bảng định kiểu mặc định. Đó là lý do tại sao, khi bạn tạo một trang mà không có bất kỳ kiểu nào được xác định, <h1>các thẻ sẽ lớn và in đậm, và <strong>làm cho văn bản được in đậm. Tương tự, các kiểu phông chữ cho <input>và <textarea>các phần tử được xác định theo kiểu mặc định.

Để xem biểu định kiểu này trong Firefox, hãy đặt biểu định kiểu này vào thanh địa chỉ của bạn: resource://gre/res/forms.css

Dù sao, bạn phải ghi đè các kiểu này như cách bạn làm với bất kỳ kiểu nào khác giống như bạn đã làm trong ví dụ cuối cùng đó.

Trong trường hợp bạn đang tự hỏi những kiểu khác được xác định, hãy xem các tệp CSS trong tài nguyên của bạn. Bạn có thể truy cập chúng qua url ở trên hoặc bằng cách tìm trong resthư mục của bạn trong thư mục firefox (ví dụ c:\program files\mozilla firefox\res:). Đây là những thứ có thể ảnh hưởng đến kiểu trang bình thường:

html.css
form.css
quirk.css
ua.css

— nickf
nguồn

nhưng <h1> đang lấy kiểu chữ <body>nhưng <textarea>không

— Jitendra Vyas

3

Các kiểu cho h1không xác định một phông chữ, do đó các bodykiểu của bạn được ưu tiên hơn. Các kiểu cho inputthực sự xác định một kiểu và nó cụ thể hơn bộ chọn của bạn, vì vậy nó chiến thắng.

— nickf

+1 cho nhận xét của bạn. Tôi không biết. ý bạn là một số phần tử có kiểu cụ thể theo mặc định trong trình duyệt và không thể được ghi đè bởi nội dung {....}

— Jitendra Vyas

1

Tôi nghĩ ý của anh ấy là một số phần tử cụ thể hơn những phần tử khác trong DOM hoặc có phạm vi nhỏ hơn. Vì một vùng văn bản tồn tại bên trong nội dung, bất kỳ kiểu nào được xác định cho vùng văn bản sẽ ghi đè lên các kiểu nội dung {}. Vì vậy, kiểu textarea mặc định của FF sẽ ghi đè kiểu body của bạn, mặc dù kiểu của bạn được xác định sau (thường thì thứ gì đó mới hơn sẽ được ưu tiên hơn, nhưng không phải nếu nó ở phạm vi rộng hơn / ít cụ thể hơn).

— người dùng1072406
nguồn

0

Tôi đã thử tất cả các thủ thuật để ngăn chặn textarea trên thiết bị di động bằng cách sử dụng phông chữ lớn hơn nhiều so với văn bản bình thường. Có vẻ như khi textarea của tôi là cols = "45" thì phông chữ vẫn bình thường nhưng ngay sau khi nó được nâng lên thành cols = "71", mặc dù nó vẫn ở bên trong thẻ td, phông chữ đã lớn lên.

Trên trang mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ), tôi tìm thấy

textarea {
   text-size-adjust: none;
}

Nó dường như là câu trả lời tốt nhất cho tôi. Nó hoạt động trên PC, máy tính bảng và quan trọng nhất là trên điện thoại Android của tôi.

— Brian Jones
nguồn