www.webdeveloper.com
Results 1 to 8 of 8

Thread: Help with text box backgrounds

  1. #1
    Join Date
    Mar 2006
    Posts
    5

    Help with text box backgrounds

    I've been having trouble trying to figure out how to get a text box to keep a background when a cursor is in it. I thought that you would use either :activer :focus, but neither one worked for me. Here is an example of what I want to do: http://www.phpbb.com/styles/forum/index.php?style=221

    Notice the search field in the top right of this phpBB forum, when you click on it, it stays one color. How do you do that in CSS?

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Huh? Those boxes go through three shades of gray for me.

  3. #3
    Join Date
    Mar 2006
    Posts
    5
    Yeah, but when you click inside the field, it stays the lightest of the three colors. Obviously it's using :hover to get one alternate color, but I can't figure out how they get the lightest color.

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Code:
    input.mainoption { background-color: #666; font-weight: bold;  border: solid 1px #333; height: 17px; color: #000; }
    input.mainoption:hover { border-color: #222; background-color: #777; }
    input.mainoption:focus { border-color: #000; background-color: #AAA; }

  5. #5
    Join Date
    Mar 2006
    Posts
    5
    Okay, so it was focus; I've got it working now. I must have been making some error before.
    Thanks for the help.

  6. #6
    Join Date
    Mar 2006
    Posts
    5
    Hold on a sec. This feature seems to be working correctly for Firefox and Konqueror, but today I tested my site with IE and it is not working properly. It seems that most of the backgrounds that change on hover are not. This includes the hover and focus code that I'm using for the text boxes. Is there a way to fix this?

  7. #7
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Put a "Best Viewed in IE 7" disclaimer on the site? The current IE only applies those pseudoclasses to anchors. You could try this.

    http://www.vladdy.net/demos/iepseudoclassesfix.html

  8. #8
    Join Date
    Mar 2006
    Posts
    5
    Thanks for the link, I'll try that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles