Dynamic Drive- Interesting CSS effects for NS6+/Mozilla 0.92 forms

Dynamicdrive.com

New

Revised

Hot

FAQ

Submit

M Zone

.	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... .

Home The More Zone 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:




Some text

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