SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2001
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing colors of form fields like search boxes?

    This may be a stupid question but I have searched here and on the web and haven't come up with anything. I want to be able to change the background color and text color of a search box, so if anyone can help me out or give me the url of a site that has tips on how to do this it would be greatly appreciated. Thanks,

  2. #2
    Typo Negative brokenvoice's Avatar
    Join Date
    Dec 2001
    Location
    Scotland
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do it in two ways using CSS. The first is to use a type selector like this:
    Code:
    input
    {
        background-color : #600;
        color : fff;
    }
    The problem there is that all your input elements will look like that, textboxes, radio buttons, submit buttons etc.

    My preferred way of doing it is to use a class selector like this:
    Code:
    .textbox
    {
        background-color : #600;
        color : #fff;
    }
    Then you can apply it to whatever elements you need to including <textarea>s like this:
    Code:
    <input type="text" class="textbox" etc...>
    <textarea class="textbox" cols="50" etc...></textarea>

  3. #3
    <C²: web standards /> cybercodeur's Avatar
    Join Date
    Dec 2001
    Location
    Montréal
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note however that this will only work in Explorer. Netscape is yet unable to treat that type of request. If you design solely for IE, CSS will get you pretty far in terms of modifying your input types and othr form elements.

    Sorry...
    Denis Boudreau <C²/> - Web Standards & Accessibility
    [+] ICQ number: 115649885 || Email: denis@cybercodeur.net
    [+] Daily Weblog on Web standards and accessibility : CYBERcodeur.net

  4. #4
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note that cybercodeur is referring to Netscape 4.x and earlier. Netscape 6.x will treat form elements with background colors, et cetera properly.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  5. #5
    <C²: web standards /> cybercodeur's Avatar
    Join Date
    Dec 2001
    Location
    Montréal
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Aes
    Note that cybercodeur is referring to Netscape 4.x and earlier. Netscape 6.x will treat form elements with background colors, et cetera properly.

    Doooohhhh! That's right!
    Denis Boudreau <C²/> - Web Standards & Accessibility
    [+] ICQ number: 115649885 || Email: denis@cybercodeur.net
    [+] Daily Weblog on Web standards and accessibility : CYBERcodeur.net

  6. #6
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A note of warning though ...

    I have found that applying styles to input fields using a class can sometimes cause some unwanted side effects in Netscape 4.*. Usually, it causes fields to display much bigger.

    If you do find this happening, I would advise adding the following font-family to the class:
    .textbox
    {
    background-color : #600;
    color : #fff;
    font-family:monospace;
    }

    You may not need it, but I've found it to fix the problem in the past.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •