Styling INPUT using CSS and JavaScript

April 10, 2008 at 6:24 am Leave a comment

Well, you know and heard about CSS selectors, but they will not work well in IE. But you can use JavaScript to get done on IE also.

Powerful DOM structure can used for styling form elements like radio, text, checkbox… let’s have a look for example which i get implemented recently one of OSCommerce project:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Testing Form Elements</title>

<script type=”text/javascript“>
function addEvent(elm, evType, fn, useCapture)

// cross-browser event handling for IE5+, NS6 and Mozilla

{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent(“on”+evType, fn);
return r;
} else {
alert(“Handler could not be removed”);
}
}

function prepareTextBoxes(){
if (!document.getElementsByTagName) return;
var oi=0;
var thisObj;
var objs = document.getElementsByTagName(“input”);

for (oi=0;oi<objs.length;oi++) {
thisObj = objs[oi];
if(thisObj.getAttribute(‘type’) == ‘text’){ //For Text
thisObj.className = ‘text ‘ + thisObj.className;
}

if(thisObj.getAttribute(‘type’) == ‘radio’){// For Radio
thisObj.className = ‘radio ‘ + thisObj.className;
}

if(thisObj.getAttribute(‘type’) == ‘checkbox’){ //For Checkbox
thisObj.className = ‘checkbox ‘ + thisObj.className;
}

}
}

addEvent(window, “load”, prepareTextBoxes);

</script>

<style type=”text/css“>
input[type=text], input[type=checkbox], input[type=radio]{
border: 1px solid #9C9C9C;
background-color: #F9F9F9;
color: #5A6500;
font: bolder 12px Verdana, Arial, Helvetica, sans-serif;
padding: 1px 2px;}

.text, .checkbox, .radio{ /* Appending IE */
border: 1px solid #9C9C9C;
background-color: #F9F9F9;
color: #5A6500;
font: bolder 12px Verdana, Arial, Helvetica, sans-serif;
padding: 1px 2px;}
</style>
</head>

<body>

<form name=”testform” method=”” action=””>
<label>Text:</label> <input type=”text” /><br /><br />
<label>Radio:</label> <input type=”radio” name=”test” /><br /><br />
<label>Checkbox:</label> <input type=”checkbox” /><br /><br />
</form>
</body>
</html>

Advertisements

Entry filed under: CSS & JavaScript. Tags: , , , .

CSS Shorthand Properties

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Tweets… :)

Categories

Feeds

Blog Stats

  • 20,613 hits

%d bloggers like this: