Products
Services
Contact Us
⌂

Scripts: Javascript :: Forms :: Library Article #11

Developer's Section

Learn to style form elements using Javascript and CSS
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (2922)
Favorites:

In this tutorial we will learn how to style input boxes, textareas, and other form elements using javascript and CSS.

Part 1: Style Form Buttons

You can use the Javascript methods onmouseover and onmouseout to change the style of your html buttons.

Example 1:

Change the text color of a button:

Code for Example 1

 Code Snippet 1

 <script language="Javascript">

function changeColor(thisButton, newcolor) {
    thisButton.style.color = newcolor
}

</script>

<input type="button" name="btnex1" value="Click Me" 
 onmouseover="javascript:changeColor(this,'3366CC')"
 onmouseout="javascript:changeColor(this,'66FF99')">
 

Example 2:

Change the background and color of a button

Code for Example 2

 Code Snippet 2

 <script language="Javascript">

function changeColor2(thisButton, newcolor) {
    thisButton.style.backgroundColor = newcolor
}

</script>

<input type="button" name="btnex1" value="Click Me" 
 onmouseover="javascript:changeColor2(this,'CC0033')"
 onmouseout="javascript:changeColor2(this,'FFCC33')"
 style="background-color:yellow">
 

See other Scripts in Forms

 

Submit Your Scripts:

System Message:
  • Your Javascript script has been sent. Please allow 48 hours for processing.
If you would like to have your Javascripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ] 		  

 









User Services Software Products Custom App Development Web Design / Development Robo Tools Members
Developers / Discussions Javascript Guides PHP Guides DHTML Guides C Language Guides C# Guides C++ Guides ASP Guides Perl Guides Unix Guides
Inquiries / Support Request a Quote Account Login Feedback Help Topics En Espanol Advertise With Us Contact Us
Privacy Policy | Terms of Service |
 © Copyright 2024 Erobo Software Inc