Some CSS trouble with input and textarea in Firefox

Yesterday, I noticed some weird behaviour in Firefox. I have had an input field and a textarea formatted with CSS like:

input, textarea
{
    color: red;
    font-size: 0.8em;
}

If you look at this CSS, you would assume that a text you enter will look the same whether it is in the input field or the textarea. Well, with Konqueror, that is true. But with Firefox, it is different. It seems to me that by default different fonts are used for the two elements. So you have to specify the font family in the CSS:

input, textarea
{
    color: red;
    font-family: Verdana,Arial,Sans-serif;
    font-size: 0.8em;
}

And so it works with Firefox, too.

12 Comments

  1. Posted February 2, 2006 at 12:37 pm | Permalink

    Please use a background-color whenever you set a color. At very least, make sure one is inherited. For all you know, the user’s defaults are pink on red, so the input, textarea above will have invisible writing (like some bits of this form do for me…).

    This advice is based on W3C’s Web Accessibility Initiative: http://www.w3.org/TR/WCAG/#gl-color

    Hope that helps. Ciao.

  2. Posted February 2, 2006 at 1:06 pm | Permalink

    Thanks for your advice!

  3. Posted February 2, 2006 at 4:51 pm | Permalink

    Ahhh!!! A useability that I have never even thought about. I have had that same problem on other site’s where they have a weird color, but firefox puts all familiar stuff as a color and overrides. So, the background of yellow then has yellow text. (Like your email address I think is one of them in Firefox or IE).

    Anyway, nice tip!

  4. Posted February 2, 2006 at 8:45 pm | Permalink

    It would be easier to just set things like font-family for every element right off the bat, thus saving you from having duplicate settings for td, div, p, span, input, textarea…

    * {
    font-family: verdana, sans-serif;
    }

    And, as a side note: please, please do not ever specify the abomination that is Arial. If you want that ’60s Gothic look, just use Helvetica in the first place…

  5. jordan
    Posted April 18, 2006 at 10:21 pm | Permalink

    Hi, it works perfectly! thanx for ur advice^^

  6. kenneth
    Posted May 4, 2006 at 2:57 am | Permalink

    A related problem that led me to this posting –

    I was having a problem where firefox was displaying the font-size of a textarea element approximately half the size of that in a regular text field.

    After reading that the font-family was being set differently between the two, I tried using the * font-family entry on my style sheet and wa-la! it evened them out, now they are the same size. Thanx!

  7. Posted October 29, 2010 at 2:18 pm | Permalink

    * selector is not good for performances (see https://developer.mozilla.org/en/Writing_Efficient_CSS)
    Use instead something like this :

    body,
    input,
    textarea{
    font-family: verdana, sans-serif;
    }

  8. Posted July 18, 2013 at 9:36 am | Permalink

    Why visitors still use to read news papers when in this technological globe
    the whole thing is presented on net?

  9. Posted July 30, 2013 at 4:00 pm | Permalink

    It’s actually very complicated in this busy life to listen news on TV, thus I simply use the web for that reason, and take the most recent information.

  10. Posted August 6, 2013 at 10:11 am | Permalink

    Link exchange is nothing else except it is simply placing the other person’s website link on your page at appropriate place and other person will also do same in favor of you.

  11. Posted September 3, 2013 at 2:36 am | Permalink

    This design is incredible! You definitely know
    how to keep a reader entertained. Between your wit and your videos,
    I was almost moved to start my own blog (well, almost…HaHa!) Wonderful job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

  12. Posted September 4, 2014 at 10:49 am | Permalink

    Thank you for sharing your info. I truly appreciate your efforts and I am
    waiting for your further post thanks once again.


Post a Comment

Required fields are marked *
*
*

%d bloggers like this: