Dynamic Drive DHTML code library!
Dynamicdrive.com


.
spacer.gif (807 bytes)
.

Menu

Search DD
Recommend DD
Help Forums New
DHTML books
Advertising
Contact

Featured Script
Rollover buttons 

Turn regular form buttons into rollover menus with this script!
.

Partners

Free JavaScripts
.

Link to DD

Do you use scripts from Dynamic Drive? Please give something back by linking to us...
.
spacer.gif (807 bytes)

Home small4.gif (635 bytes) The More Zone small4.gif (635 bytes) Here

Noteworthy CSS effects for NS6+/Mozilla 0.92 forms

Netscape 6 may not be catching on yet, but when it comes to support for CSS, it's sure has caught up with IE. Tuxracer (a Dynamic Drive surfer) demonstrates this by showing several interesting CSS effects for forms, applicable in NS6+ and Mozilla 0.92+ only. Eat your hearts out IE users (hay, that includes us)!

-Puesdo class form:focus
-Puesdo class form:hover
-Attribute: -moz-border-radius


Case 1: Use the CSS2 puedo class :focus to dynamically color the form element currently in focus:

Source:

<style type="text/css">
input:focus { background-color: #FFFF99 }
textarea:focus { background-color: #FFFF99 }
</style>
Demo: Click on the various form elements:


Case 2: Use the CSS2 puedo class :hover on form buttons to dynamically color them onMouseover:

Source:

<style type="text/css">
input[type="button"]:hover { background-color: lime }
</style>
Demo: Move your mouse over the form buttons


Case 3: Give form buttons round edges!

Source:

<style type="text/css">
input[type="button"] { -moz-border-radius:25px }
input[type="submit"] { -moz-border-radius:25px }
</style>
Demo:

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

Legend
All- Script works with Netscape 4 AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 (NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4 and above
NS6!- Temporary index set up on script category pages to indicate script works in NS6


Copyright 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
Partners: JavaScript Tutorials | JavaScript Reference