www.webdeveloper.com
Results 1 to 7 of 7

Thread: Apply css class to all inputs textbox controls

  1. #1
    Join Date
    Feb 2006
    Posts
    20

    Apply css class to all inputs textbox controls

    Hi all,
    I want to apply a same css class on all textbox in the page like this:
    HTML Code:
    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,

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    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.
    Code:
    div.controls input.textbox
    {
    width: 196px;
    }
    
    <input type="text" class="textbox" other attributes />
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    Code:
    <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>
    Bitter web veteran

  4. #4
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    A JavaScript way won't work for everyone, why go that route when there's a way that will work for everybody?
    Every fight is a food fight when you’re a cannibal.

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

    Code:
    .textbox {
    width: 196px;
    }

    ----
    http://www.codebudo.com/

  6. #6
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    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.
    Bitter web veteran

  7. #7
    Join Date
    Feb 2006
    Posts
    20
    hay guys, than you all, I already know the .textbox class way, and alos the js is a good solution.
    Thank you all

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles