Tajuk ditulis semula sebagai: Bagaimana untuk mengubah saiz teks dalam semua kawasan input (termasuk pendaftaran e-mel, kotak ulasan dan lungsur halaman indeks resipi) dalam CSS?

Question

Tapak web: https://olivefordinner.com/

Cari kod CSS yang mencapai:

1. Jadikan teks lebih besar apabila memasukkan e-mel anda untuk mendaftar di halaman utama. Ia terlalu kecil.

2. Apabila meninggalkan ulasan pada siaran resipi (cth: https://olivefordinner.com/toasted-muesli-recipe/), bagaimana untuk menjadikan teks lebih besar semasa pembaca menaip. Sekali lagi, teks ini terlalu kecil.

3. Cara untuk menjadikan teks dalam kotak teks lungsur turun di lajur kiri lebih besar. Mereka sangat kecil! https://olivefordinner.com/recipe-index/

Terima kasih!

Saya telah banyak mencari kod CSS, tetapi tiada satu pun yang saya temui mempengaruhi saiz teks kawasan ini.

Answer 1

Tetapan saiz fon adalah seperti berikut

input, select, textarea {
    ....
    font-size: 11px;
    font-style: italic;
    ....
}

Ini akan meletakkan input、select 和 textarea 元素的字体大小设置为 11px.

Kaedah pembaikan

1 - Anda boleh mengemas kini font-size kepada saiz yang anda mahukan

input, select, textarea {
    ....
    font-size: 20px;
    ....
}

Tetapi sila ambil perhatian, ini akan menjejaskan semua input、select 和 textarea ​​elemen dalam laman web

2 - Anda boleh membuat kelas baharu font-size dengan yang diperlukan

.font-size-20 {
    font-size: 20px;
}

Tambahkan kelas ini pada elemen yang memerlukan saiz fon yang lebih besar, seperti

<input class="font-size-20" id="email" name="email" type="email">

Answer 2

Soalan 1

Ini akan meningkatkan saiz fon 通过电子邮件获取新食谱的注册 elemen

anda

.enews-form > #subbox {
    font-size: 12pt !important;
}

.enews-form > input[type=submit] {
    font-size: 12pt !important;
}

Soalan 2

Ini akan menyelesaikan masalah ini

#commentform textarea#comment, #commentform input#author, #commentform input#url {
    font-size: 13pt !important;
}

Soalan 3

Ini akan membetulkan dropdown

select#cat, select#archives-dropdown-2 {
    font-size: 12pt;
}

Perhatian

Anda boleh menambah CSS tersuai untuk setiap soalan pada setiap halaman atau secara global seperti yang ditunjukkan di bawah

/* 问题1的解决方案 */
.enews-form > #subbox {
    font-size: 12pt !important;
}
.enews-form > input[type=submit] {
    font-size: 12pt !important;
}

/* 问题2的解决方案 */
#commentform textarea#comment, #commentform input#author, #commentform input#url {
    font-size: 13pt !important;
}

/* 问题3的解决方案 */
select#cat, select#archives-dropdown-2 {
    font-size: 12pt;
}

Sila ambil perhatian bahawa kod CSS ini hanya berfungsi pada elemen masing-masing, tidak seperti kod CSS dalam jawapan lain.