Question 204675 in CSS Question posted in
Some basic documentation can be found here.

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

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.

Tags:

3

Answers


  1. 0

    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">
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search