ทำไม <textarea> และ <textfield> ไม่ใช้ font-family และ font-size จาก body?

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

— Jitendra Vyas
แหล่งที่มา

76

โดยค่าเริ่มต้นเบราว์เซอร์จะแสดงองค์ประกอบฟอร์มส่วนใหญ่ (พื้นที่ข้อความกล่องข้อความปุ่ม ฯลฯ ) โดยใช้ตัวควบคุมระบบปฏิบัติการหรือตัวควบคุมเบราว์เซอร์ ดังนั้นคุณสมบัติของฟอนต์ส่วนใหญ่จึงนำมาจากธีมที่ระบบปฏิบัติการกำลังใช้อยู่

คุณจะต้องกำหนดเป้าหมายองค์ประกอบฟอร์มด้วยตัวเองหากคุณต้องการเปลี่ยนรูปแบบฟอนต์ / ข้อความ - ควรจะง่ายพอโดยการเลือกเช่นเดียวกับที่คุณเพิ่งทำ

เท่าที่ฉันทราบมีเพียงองค์ประกอบของรูปแบบเท่านั้นที่ได้รับผลกระทบ inputปิดด้านบนของหัวของฉัน: button, textarea, select,

— กลอนนาฬิกา
แหล่งที่มา

32

textarea, input, button, select { font-family: inherit; font-size: inherit; }วิธีการรักษาที่ตรงที่สุดถ้านี่คือพฤติกรรมที่ไม่พึงประสงค์คือการเพิ่มรูปแบบของคุณ

— Devvyn

@Devvyn คุณควรเพิ่มtext-align: inheritเพราะข้อความของปุ่มมักจะอยู่ตรงกลาง

— Joshua Muheim

ในทางกลับกันฉันจะใช้ฟอนต์ OS นั้นกับหน้าเว็บ / เนื้อหาทั้งหมดของฉันได้อย่างไร

— agirault

@agirault คุณสามารถทำสิ่งนี้: body {font-family: 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;
}

— spoulson
แหล่งที่มา

4

IE ก่อนเวอร์ชัน 8 ไม่รองรับการสืบทอดดังนั้นจึงใช้ไม่ได้

— แพะไม่พอใจ

6

ฉันคิดว่านี่เป็นเพียงโซลูชันข้ามเบราว์เซอร์เพื่อกำหนดทุกองค์ประกอบbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— Jitendra Vyas

1

ฉันเห็นด้วยแนวทางดังกล่าวมีประโยชน์มากกว่า ฉันแค่อยากแสดงให้เห็นพฤติกรรมที่คุณเห็นโดยใช้inheritวิธีนี้

— spoulson

Unfortunatelly chrome (เวอร์ชัน 59.0.3071.115) ไม่ได้ใช้ font-size: inherit; โดยไม่ต้องระบุตระกูลแบบอักษร

— Ondrej

font-weight: inherit;ที่ขาดหายไป.

— สิ้นสุด

10

เบราว์เซอร์ทั้งหมดมีสไตล์ชีตเริ่มต้นในตัว นั่นเป็นเหตุผลว่าทำไมเมื่อคุณสร้างเพจโดยไม่ได้กำหนดรูปแบบใด ๆ เลย<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

— nickf
แหล่งที่มา

แต่ <h1> กำลังใช้รูปแบบตัวอักษรจาก<body>แต่<textarea>ไม่ใช่

— Jitendra Vyas

3

สไตล์สำหรับh1ไม่กำหนดฟอนต์ดังนั้นbodyสไตล์ของคุณจึงมีความสำคัญ สไตล์สำหรับinputกำหนดสไตล์และมีความเฉพาะเจาะจงมากกว่าตัวเลือกของคุณดังนั้นจึงชนะ

— nickf

+1 สำหรับความคิดเห็นของคุณ ฉันไม่ทราบ คุณหมายถึงองค์ประกอบบางอย่างมีลักษณะเฉพาะโดยค่าเริ่มต้นในเบราว์เซอร์และไม่สามารถแทนที่ด้วยเนื้อความได้ {.... }

— Jitendra Vyas

1

ฉันคิดว่าสิ่งที่เขาหมายถึงคือองค์ประกอบบางอย่างมีความเฉพาะเจาะจงมากกว่าองค์ประกอบอื่น ๆ ใน DOM หรือมีขอบเขตที่เล็กกว่า เนื่องจากพื้นที่ข้อความมีอยู่ภายในเนื้อหาสไตล์ใด ๆ ที่กำหนดไว้สำหรับ textarea จะเขียนทับสไตล์เนื้อความ {} ดังนั้นสไตล์ textarea เริ่มต้นของ 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 ของฉัน

— Brian Jones
แหล่งที่มา