How to make text bigger in all input areas (email signup, comment box, recipe index page dropdown) in CSS?

Question

Website: https://olivesfordinner.com/

Looking for CSS code that will achieve the following:

1. When typing in email on homepage to sign up for newsletter, making that text appearbigger. It's so small.

2. When leaving a comment on a recipe post (example: https://olivesfordinner.com/toasted-muesli-recipe/), how to make the text bigger as the reader is typing within it. Again, this text is so small.

3. How to make the text appear bigger in the drop-down text boxes on the left-hand column. They are so tiny! https://olivesfordinner.com/recipe-index/

Thank you!

I have googled lots of CSS code, but nothing I've found has affected the text size in these areas at all.

Answer 1

Issue 1

This will increase the font size for your Sign up to get new recipes via email. element

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

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

Issue 2

This will fix this issue

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

Issue 3

This will fix the dropdown lists

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

Notice

you can add each to the custom css for each page or globally as such

/* Issue 1 Solver */
.enews-form > #subbox {
    font-size: 12pt !important;
}
.enews-form > input[type=submit] {
    font-size: 12pt !important;
}

/* Issue 2 Solver */
#commentform textarea#comment, #commentform input#author, #commentform input#url {
    font-size: 13pt !important;
}

/* Issue 3 Solver */
select#cat, select#archives-dropdown-2 {
    font-size: 12pt;
}

Do know that this CSS code will only effect their respective elements, unlike the css code by others' answers.

Answer 2

The font size is setting with this

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

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

Fix

1 - You can update font-size into required size

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

But note, this will effect all the input, select and textarea elements in the website

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

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

add this class with elements you need bigger font size, like

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

Answer 3

Just use the following selectors and change the font-size

For Header email subscription, drop-down text and comment:

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

For search:

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

Footer email subscription:

.footer-widgets .enews-widget input{
    font-size: 20px;
}