Titre réécrit comme : Comment redimensionner le texte dans toutes les zones de saisie (y compris l'inscription par e-mail, la zone de commentaire et la liste déroulante de la page d'index de recette) en CSS ?

Question

Site Web : https://olivesfordinner.com/

Recherchez le code CSS qui réalise :

1. Agrandissez le texte lors de la saisie de votre email pour vous inscrire sur la page d'accueil. C'est trop petit.

2. Lorsque vous laissez un commentaire sur un article de recette (par exemple : https://olivesfordinner.com/toasted-muesli-recipe/), comment agrandir le texte au fur et à mesure que les lecteurs tapent. Encore une fois, ce texte est trop petit.

3. Comment agrandir le texte dans la zone de texte déroulante de la colonne de gauche. Ils sont si petits ! https://olivesfordinner.com/recipe-index/

Merci !

J'ai beaucoup cherché du code CSS, mais aucun que j'ai trouvé n'affecte la taille du texte de ces zones.

Answer 1

Les paramètres de taille de police sont les suivants

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

Cela mettra input、select 和 textarea 元素的字体大小设置为 11px.

Méthode de réparation

1 - Vous pouvez mettre à jour font-size à la taille que vous souhaitez

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

Mais attention, cela affectera tous les input、select 和 textareaéléments du site

2 - Vous pouvez créer une nouvelle classe font-size avec le

requis

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

Ajoutez cette classe aux éléments qui nécessitent une taille de police plus grande, comme

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

Answer 2

Question 1

Cela augmentera la taille de la police de vos 通过电子邮件获取新食谱的注册 éléments

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

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

Question 2

Cela résoudra ce problème

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

Question 3

Cela corrigera la liste déroulante

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

Attention

Vous pouvez ajouter du CSS personnalisé pour chaque question sur chaque page ou globalement comme indiqué ci-dessous

/* 问题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;
}

Veuillez noter que ce code CSS ne fonctionne que sur l'élément respectif, contrairement au code CSS dans d'autres réponses.