Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS rollover background in form fields

    I'm trying to mimic the form styling in the form at this page http://moretech.us.com/about

    I can modify existing CSS pretty well, but I'm still unclear about the basics I'm not sure how to create the rollover effect in that form. Could someone explain, or point me to a tutorial for beginners that explains how to create rollovers?

    Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ennergi,

    This is the bit that's changing the color on hover:
    Code:
    .cform input:hover,
    .cform textarea:hover,
    .cform select:hover	{
    	background:#326CA0; 
    	color:white;
    }
    He's used an ol for his form. That's some pretty complicated stuff there, I didn't find why hover is working on something that's not a link...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    :hover works on FF on all elements I think. Safari has decent support. IE7 to some extent. And IE6 only has hover on links.

    This site will show you how to add hover to all elements across all browsers. I've used it here and there and it works pretty well.
    http://www.xs4all.nl/~peterned/csshover.html

  • Users who have thanked sobrien79 for this post:

    Excavator (01-17-2008)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by sobrien79 View Post
    :hover works on FF on all elements I think. Safari has decent support. IE7 to some extent. And IE6 only has hover on links.

    This site will show you how to add hover to all elements across all browsers. I've used it here and there and it works pretty well.
    http://www.xs4all.nl/~peterned/csshover.html
    Wow, thanks for pointing that out sobrien79. So glaringly obvious I could not see it!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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