Most of the time, Web Developers and Designers will have to make sure their JavaScript and CSS are working in different browsers and versions. If you have been using CSS2 selector input[type='text'] for styling all form text-fields in your web page, you may have already known that it doesn’t work in IE6 and prior versions of IE, say IE5 and so on.

For example, I wanted to apply the following CSS to all text-fields in my web page, here is how it would look like:

CSS

input[type='text']{
 border:2px solid #ccccff;
}

HTML Form

<label>Form 1</label>
<form name="form1">
<input type="text" name="f1-input1" size="30"/>
<input type="text" name="f1-input2" size="30"/>
</form>
 
<label>Form 2</label>
<form name="form2">
<input type="text" name="f2-input1" size="30"/>
<input type="text" name="f2-input2" size="30"/>
<input type="text" name="f2-input3" size="30"/>
</form>

Well, as what you have expected, it will apply to all text-fields and set the ‘border’ attributes to respective text-field elements. It basically works fine in Firefox, Chrome, Safari, Opera and IE7/8. Unfortunately, it is NOT working in IE6 and below.

The Trick Is?
So, what should we do for dealing with that issue? Perhaps, the simplest method is to use CSS class method. Whereas, change the CSS to something as follows:

CSS

 .iTextStyle {
 border:2px solid #ccccff;
}

and, add the ‘class’ attribute in every single input text-field like so:

HTML

<input type="text" name="f1-input1" size="30" class="iTextStyle"/>
<!-- more text-fields below -->

OK! Everything seems working fine now. Nevertheless, it will be annoying to add ‘class’ attribute accordingly if you are having number of forms in your web page. So, this method is only applicable if you are having a form with few elements.

The better way is, we can dynamically style all text-field elements by having a little help with JavaScript. Here is an example of JS code I have written:

JavaScript

//count number of form
 var numForm = document.forms.length;
 //loop over all forms and form[] elements
  for( var i = 0; i < numForm; i++ ){
    //count number of form's elements
	var numInput = document.forms[i].elements.length;
	for( var j = 0; j < numInput; j++ ){
	  //get text element only from current form
	   var typeElement = document.forms[i].elements[j].type;
	  if( typeElement === "text" ){
	    //apply class to particular element
		document.forms[i].elements[j].className = "iTextStyle";
	  }
	}   
  }

Basically, the code snippet of JS will count the number of form in your web page and, particularly iterate over elements from the form, as well as the type of each element is being checked. As long as the text-field element is encountered, we then apply the related class name to the matched element.

The advantage here is, you do not need to care the number of form/element in your web page. Yet, it will apply the CSS to all matched elements, even in IE6 and below.

NOTE:
1) You can create a JS function, say ’styleTextElement’ and put the code in that function; call it whenever you want.
2) The code should be executed AFTER all forms in your web page. Otherwise, it will not work.
3) You may check on the version of IE and only render the code when IE6 and prior versions are used for browsing the web page. For more recent versions, we can simply use CSS selector method instead.

Related posts:

1. Implement Form Serialization via JavaScript
2. Get Rid of Using eval() to Dynamically Update Form Field
3. Create a Simple LightBox
4. Watch out when deleting all Rows from a Table via JavaScript
5. Nifty Corners