Mengapa <textarei> dan <textfield> tidak mengambil font-family dan font-size dari body?

118

Mengapa Textareadan textfieldtidak mengambil font-familydan font-sizedari tubuh?

Lihat contoh langsung di sini http://jsbin.com/ucano4

Kode

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

Jika itu perilaku biasa maka haruskah saya menulis di css seperti ini. Saya membutuhkan gaya yang sama dalam semua

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

Dan berapa banyak elemen lain dalam XHTML yang tidak akan mengambil gaya font body {....}?

css xhtml Jitendra Vyas
sumber

Jawaban:

76

Secara default, browser merender sebagian besar elemen formulir (textareas, kotak teks, tombol, dll) menggunakan kontrol OS atau kontrol browser. Jadi sebagian besar properti font diambil dari tema yang digunakan OS saat ini.

Anda harus menargetkan elemen formulir itu sendiri jika Anda ingin mengubah gaya font / teksnya - harus cukup mudah dengan memilihnya, seperti yang baru saja Anda lakukan.

Sejauh yang saya tahu, hanya elemen bentuk yang terpengaruh. Dari atas kepala saya: input, button, textarea, select.

BoltClock
sumber
32
Solusi paling langsung jika perilaku ini tidak diinginkan adalah dengan menambahkan gaya Anda textarea, input, button, select { font-family: inherit; font-size: inherit; },.
Devvyn
@Devvyn, Anda harus menambahkan text-align: inheritkarena teks tombol sering sejajar di tengah.
Joshua Muheim
Bagaimana cara melakukan sebaliknya, alias, menggunakan font OS itu untuk seluruh halaman web / badan saya?
Agirault
@agirault Anda dapat melakukan sesuatu seperti ini: body {font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans "," Helvetica Neue "," Helvetica "," Arial ", sans-serif; }
getup8
149

Kontrol tertentu tidak default untuk mewarisi pengaturan font. Anda dapat menggantinya dengan menempatkan ini di CSS Anda:

textarea {
   font-family: inherit;
   font-size: inherit;
}
spoulson
sumber
4
IE sebelum versi 8 tidak mendukung inherit, jadi itu tidak akan berfungsi.
DisgruntledGoat
6
Saya rasa ini hanya solusi lintas browser untuk menentukan setiap elemenbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }
Jitendra Vyas
1
Saya setuju, pendekatan itu lebih praktis. Saya hanya ingin menunjukkan perilaku yang Anda lihat dengan menggunakan inheritpendekatan ini.
spoulson
Sayangnya chrome (versi 59.0.3071.115) tidak menerapkan font-size: inherit; tanpa menentukan font-family.
Ondrej
font-weight: inherit;hilang.
ceving
10

Semua browser memiliki lembar gaya default bawaan. Itulah mengapa, saat Anda membuat halaman tanpa gaya yang ditentukan sama sekali, <h1>tag menjadi besar dan tebal, dan <strong>membuat teks menjadi tebal. Demikian pula, gaya font untuk <input>dan <textarea>elemen ditentukan dalam gaya default.

Untuk melihat stylesheet ini di Firefox, masukkan ini ke bilah alamat Anda: resource://gre/res/forms.css

Bagaimanapun, Anda harus mengganti gaya ini seperti yang Anda lakukan pada gaya lain seperti yang Anda lakukan di contoh terakhir.

Jika Anda bertanya-tanya gaya lain apa yang didefinisikan, lihat file CSS di sumber daya Anda. Anda dapat mengaksesnya melalui url di atas, atau dengan melihat di resfolder Anda di direktori firefox (misalnya:) c:\program files\mozilla firefox\res. Ini adalah salah satu yang mungkin memengaruhi gaya halaman normal:

  • html.css
  • forms.css
  • quirk.css
  • ua.css
nickf
sumber
tetapi <h1> mengambil gaya font <body>tetapi <textarea>tidak
Jitendra Vyas
3
Gaya untuk h1tidak menentukan font, oleh karena itu bodygaya Anda diutamakan. Gaya untuk inputmenentukan gaya, dan ini lebih spesifik daripada pemilih Anda, jadi gaya menang.
nickf
+1 untuk komentar Anda. Saya tidak sadar. maksud Anda, beberapa elemen memiliki gaya spesifik secara default di browser dan tidak dapat diganti oleh body {....}
Jitendra Vyas
1

Menurut saya yang dia maksud adalah beberapa elemen lebih spesifik daripada elemen lain di DOM, atau memiliki cakupan yang lebih kecil. Karena textarea ada di dalam body, gaya apa pun yang ditentukan untuk textarea akan menimpa gaya {} body. Jadi gaya textarea default FF menimpa gaya tubuh Anda, meskipun gaya tubuh Anda ditentukan kemudian (biasanya gaya yang lebih baru akan diutamakan, tetapi tidak jika dalam cakupan yang lebih luas / kurang spesifik).

pengguna1072406
sumber
0

Saya mencoba segala macam trik untuk menghentikan textarea di seluler menggunakan font yang jauh lebih besar daripada teks normal. Tampaknya ketika textarea saya adalah cols = "45" font normal tetapi segera setelah dinaikkan menjadi cols = "71", meskipun itu tetap di dalam tag td, font menjadi besar.

Di halaman mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) saya menemukan ini

textarea {
   text-size-adjust: none;
}

Sepertinya itu jawaban terbaik untuk saya. Ini berfungsi di PC, tablet, dan yang paling penting, di ponsel Android saya.

Brian Jones
sumber