Apply css class to all inputs textbox controls

This site is best viewed in a modern browser with JavaScript enabled.

Apply css class to all inputs textbox controls

ProfessorX

[FONT="Segoe UI"]Hi all,
I want to apply a same css class on all textbox in the page like this:

div.controls input
{
width: 196px;
}

but the problem that all of the controls are inputs like the textbox and the buttons so what is the solution for this??

regards,[/FONT]

David_Harrison

Well, there is a purely CSS way, however IE doesn't support it. So the only practical way would be to apply a class to all of the inputs you wish to reference.

div.controls input.textbox
{
width: 196px;
}

<input type="text" class="textbox" other attributes />

Webnerd

<script type="text/javascript">
window.onload=function(){
  var inputs=document.getElementsByTagName('input');
  for(i=0;i<inputs.length;i++){
     if(inputs[i].type.match(/text/i)){
         inputs[i].className='textbox';
     }
  }
}
</script>

David_Harrison

A JavaScript way won't work for everyone, why go that route when there's a way that will work for everybody?

codebudo

If you're going to add class="textbox" to the input elements, you can just do this:

.textbox {
width: 196px;
}

http://www.codebudo.com/

Webnerd

A JavaScript way won't work for everyone

Who? The lame user using Lynx as their browser? Get with the times. If they don't have Javascript enabled, then give them a <noscript> tag that tells the idiot to turn it on. So does that mean jQuery and Prototype are useless?

Don't force your opinions on people when you don't even know who their audience is or what the the project is related to.

ProfessorX

hay guys, than you all, I already know the .textbox class way, and alos the js is a good solution.
Thank you all