Title rewritten as: How to resize text in all input areas (including email signup, comment box and recipe index page dropdown) in CSS?

Question

Website: https://olivesfordinner.com/

Look for CSS code that can achieve the following effects:

1. Make the text larger when entering your email to register on the home page. It's too small.

2. When leaving a comment on a recipe post (eg: https://olivesfordinner.com/toasted-muesli-recipe/), how to make the text larger as readers type. Again, this text is too small.

3. How to make the text in the drop-down text box on the left column larger. They are so small! https://olivesfordinner.com/recipe-index/

Thanks!

I've searched a lot for CSS code, but none I've found affect the text size of these areas.

Answer 1

The font size is set as follows

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

This will set the font size of the input, select and textarea elements to 11px.

Repair method

1 - You can update font-size to the desired size

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

But please note that this will affect all input, select and textarea elements

in the site

2 - You can create a new class with the required font-size

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

Add this class to elements that require a larger font size, such as

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

Answer 2

Question 1

This will increase the font size of your Get new recipes via email element

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

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

Question 2

This will fix this issue

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

Question 3

This will fix the dropdown

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

Notice

You can add custom CSS for each question to each page or globally as shown below

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

Please note that this CSS code only works on the respective elements, unlike the CSS codes in other answers.