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: (1699)
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:

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 ]