Pertanyaan Font-family tidak diwarisi ke kolom input formulir?


Bukankah elemen input bentuk html seperti kolom input teks atau kotak pilih secara otomatis mewarisi properti font-family dari tubuh? Sebagai contoh:

body {
 font-family:'Lucida Casual', 'Comic Sans MS';
}

Ini tidak akan menggunakan font di atas di kolom input formulir di bawah ini:

<form> 
   <div>
        <label for="name">Name</label>  
        <input id="name" name="name" type="text" />  

   <div>
</form>

Silakan lihat http://jsfiddle.net/3fkNJ/

Apakah sudah umum bahwa kita harus mendefinisikan ulang font family untuk field input, atau apakah saya melakukan sesuatu yang salah?


32
2018-06-29 12:34


asal


Jawaban:


Ya, Anda perlu menempatkan font dalam input menandai.

input{
  padding:5px;
  font-size:16px;
  font-family:'Lucida Casual', 'Comic Sans MS';    
}

http://jsfiddle.net/jasongennaro/3fkNJ/1/

Anda juga bisa menggunakan inherit untuk mengatur font di form ladang.

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

http://jsfiddle.net/jasongennaro/3fkNJ/7/

EDIT - penjelasan ditambahkan

Sebagian besar browser membuat teks di dalamnya form elemen seperti sistem operasi pengguna. Ini untuk menjaga, seperti yang saya pahami, tampilan dan rasa umum bagi pengguna. Namun, semuanya dapat ditimpa oleh kode di atas.


39
2018-06-29 12:37



tidak ada yang salah dengan kode .. Ini umum karena field input mengambil pengaturan tema OS secara default .. Ini sudah dibahas dalam stackoverflow. Lihat tautan di bawah ini untuk detail lebih lanjut.

Mengapa <textarea> dan <textfield> tidak mengambil font-family dan font-size dari badan?


4
2018-06-29 12:47



Coba ubah atribut tubuh CSS Anda

body *{font-family:'Lucida Casual', 'Comic Sans MS';}

* Memaksa setiap elemen anak untuk mewarisi nilai yang ditentukan dalam aturan CSS yang Anda tulis karena aturan CSS atas spesifikasi. Lihat biola di sini

Ini berguna jika Anda ingin setiap elemen di halaman Anda memiliki nilai font-family yang sama, tidak begitu berguna jika Anda ingin formulir Anda memiliki nilai yang berbeda.

Smashing Magazine memiliki artikel yang dapat membantu Anda lebih jauh.

Saya harap itu membantu.


1
2018-06-29 12:50



itu berhasil untuk saya:

tags-input *, tags-input *:before, tags-input *:after {
  font-family: "IRANSans" !important;
}

tags-input .tags .input {
  padding-right: 5px;
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}

tags-input .tags .tag-item {
  float: right !important;
  font: 13px "IRANSans", tahoma !important;
}

0
2018-05-08 07:00