Results 1 to 5 of 5

Thread: Text field

  1. #1
    Join Date
    Dec 2004
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Text field

    Can the text input field color be changed, I saw many websites and it didn't look like they used flash or java.
    This is what the code is for the text input:
    <input type="text" name="sString" size="20"/>
    How can I change its color its white by default ?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Proper (in the head):
    Code:
    <style type="text/css">
    input {
    background-color:pink;
    }
    </style>
    The above will set the background color for all input tags on the page - buttons, radio buttons, checkboxes, text input.

    Quick and dirty (this will only affect this tag):
    Code:
    <input style="background:pink;" type="text" name="sString" size="20">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2004
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question thanx

    Thanks for the info, it works well. It also works if you put CSS style code in the body at least all the way in the beginning. I already changed color of textarea and option. Quick question, when I changed the color of OPTION the only thig that changes is the background of drop down list when you view it, it still appears white when it is not used, is there a way to change that or thats how it works ?
    Code:
    <style type="text/css">
    option {
    background-color:lightgreen;
    }
    </style>

  4. #4
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by viktor
    It also works if you put CSS style code in the body [...]
    Only because modern browsers perform error correction. A style element is only valid in the head element within a document. Don't put them anywhere else.

    I already changed color of textarea and option.
    Always make sure that you specify a foreground colour whenever you set the background (and vice versa). Desktop themes, for example, can change default colours to values that you might not expect and can render documents completely unreadable if you just assume that those defaults will be the same as they are on your computer.

    Quick question, when I changed the color of OPTION the only thig that changes is the background of drop down list when you view it, it still appears white when it is not used, is there a way to change that or thats how it works ?
    Yes, that's how it works. Set a background colour for the select element, too:

    Code:
    <style type="text/css">
      select,
      option {
        background-color: lightgreen;
        color: black;
      }
    </style>
    Mike

  5. #5
    Join Date
    Dec 2004
    Posts
    83
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by mwinter
    Only because modern browsers perform error correction. A style element is only valid in the head element within a document. Don't put them anywhere else.

    Always make sure that you specify a foreground colour whenever you set the background (and vice versa). Desktop themes, for example, can change default colours to values that you might not expect and can render documents completely unreadable if you just assume that those defaults will be the same as they are on your computer.

    Yes, that's how it works. Set a background colour for the select element, too:

    Code:
    <style type="text/css">
      select,
      option {
        background-color: lightgreen;
        color: black;
      }
    </style>
    Mike

    Thanks, I got it now.

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
  •