<input> không kế thừa phông chữ từ <body>

102

Tôi có các trường đầu vào và nhãn:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

và CSS:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

Khi mã mở trong Firefox, các phông chữ không giống nhau. Firebug cho thấy rằng cả hai "nên" kế thừa và khi tôi nhìn vào tính toán, nó cho thấy nhãn sử dụng Verdana. Tuy nhiên đầu vào cho thấy nó sử dụng "MS Shell Dlg".

Bất cứ ai có thể giải thích những gì đang xảy ra và tại sao nó dường như không tuân theo các quy tắc CSS bình thường?

css

— Judy R
nguồn

Thật là buồn khi họ không làm vậy. Tôi đoán W3C đã quyết định nó sẽ được tốt hơn để lại cho họ để được tạo kiểu như mặc định của hệ thống chứ không phải buộc phong cách broswer riêng của họ trên chúng

— vsync

125

Nó không kế thừa theo mặc định nhưng bạn có thể đặt nó để kế thừa bằng css

input, select, textarea, button{font-family:inherit;}

demo: http://jsfiddle.net/gaby/pEedc/1/

— Gabriele Petrioli
nguồn

thuộc tính phông chữ tự động kế thừa nếu nó không được đề cập, xem tại đây: developer.mozilla.org/en/CSS/font

— diEcho

4

@diEcho, điều này đúng với tất cả các phần tử ngoài phần tử biểu mẫu, những phần tử này kế thừa từ kiểu hệ thống hiện tại để chúng duy trì cảm giác quen thuộc với người dùng ( theo mặc định ), nhưng chúng có thể được ghi đè theo cách thủ công.

— Gabriele Petrioli

1

Sai hay không, những gì Firebug hiển thị cho tôi rất khó hiểu: kích thước phông chữ 12, nhưng tính ra nó vẫn trở thành 13.3333. Sau khi đặt kích thước phông chữ để kế thừa tương tự với câu trả lời của Gaby, vấn đề của tôi đã được giải quyết: O

— Jeroen

@Gaby Nó luôn luôn là tốt như vậy mà các nhà thiết kế làm cho tất cả những suy nghĩ cho chúng ta phát triển ...;)

— AGuyCalledGerald

Ngoài ra nếu bạn đặt inputbên trong label, labelthẻ không kế thừa css mặc định

— AmerllicA

16

Các mục biểu mẫu (đầu vào / văn bản / vv) không kế thừa thông tin phông chữ. Bạn sẽ cần đặt font-family trên các mục đó.

— John Green
nguồn

@jhon wat bao giờ bạn nói có thể b đúng, có tài liệu tiêu chuẩn / hợp lệ nào liên quan đến điều này không ??

— diEcho

các yếu tố phông chữ cũng không kế thừa màu sắc, nền, v.v. Trên thực tế, các yếu tố phông chữ là thứ không đáng tin cậy nhất trong toàn bộ html / css! Bạn không thể chỉ định chiều rộng cho một hộp nhập liệu và đảm bảo sẽ giống nhau trên tất cả các trình duyệt!

— Ionuț Staicu

Ý tôi là các yếu tố hình thức. Vẫn buồn ngủ :)

— Ionuț Staicu

@diEcho - Thành thật mà nói, tôi đã tìm kiếm thông số kỹ thuật và không thấy nó được gọi ra ở đâu. Nhìn qua 'Liên quan', và SO đang cung cấp cho tôi một liên kết câu hỏi trùng lặp: stackoverflow.com/questions/2874813 (cung cấp câu trả lời của tôi, mặc dù cũng không có liên kết đặc điểm). Biểu định kiểu mặc định trong Chrome liệt kê phông chữ là "-webkit-small-control;", có nghĩa là nó đã được ghi đè nội dung, do đó, phông chữ cụ thể hơn bất cứ thứ gì được đặt trên nội dung. Tương tự đối với các yếu tố TD, nếu tôi không nhầm. Vì vậy, tôi không biết nói gì hơn ngoài việc "chính là như vậy." :)

— John Green

5

Ba năm sau, tôi thấy nó lạ <input>yếu tố của các loại reset, submitvà buttonkhông kế thừa font-familytrong Chrome hoặc Safari. Tôi phát hiện ra họ cũng sẽ không nhận được đệm.

Nhưng khi tôi gây rối với sản phẩm nhất định, giống như background, borderhoặc kỳ lạ này appearancetài sản, sau đó font-familyvà paddingcó hiệu lực thi hành, nhưng nhìn mẹ đẻ và cảm nhận của nút bị mất, mà không phải là một vấn đề nếu bạn đang restyling hoàn toàn các nút.

Nếu bạn muốn có một nút trông gốc, được kế thừa font-family, hãy sử dụng <button>phần tử thay vì <input>.

Xem Codepen .

— Stoutie
nguồn

1

Tôi đã có cùng một vấn đề. Điều phù hợp với tôi là thêm kiểu trực tiếp vào phần tử đầu vào trong html. Tôi đang viết mã trong React fyi.

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

— rpd1297
nguồn