Andrew Pollack's Blog

Technology, Family, Entertainment, Politics, and Random Noise

Code Tidbit -- JavaScript to make all your button and text input elements easily CSS accessible.

By Andrew Pollack on 01/05/2007 at 10:02 PM EST

Ever want to do something in CSS that impacts only the buttons on your page? I came across a nifty bit of JavaScript that solves the problem of CSS applied to buttons rather than all input tags. A button is an input tag, and there is no CSS (current supported versions) selector for buttons specifically.

This code, called in the onload() event of the document, will add a class name of "button" to all the button elements on the form, and a class name of "text" to all the text input device.

Dustin Diaz had posted the original code, to which I've added a bit of functionality. Dustin's original simply put the class tag in. My version (which I've posted here and to Dustin's blog) will add the class tag (css allows multiple class tags with space separation) if one already exists.

function changeInputs() {
 var els = document.getElementsByTagName('input');
  for (var i=0; i <  els.length ;i++ ){
   if ( els[i].getAttribute('type') ) {
    if ( els[i].getAttribute('type') == "text" ) {
     if(els[1].className ) { els[i].className = els[i].className +  ' text '; } else { els[i].className = ' text '; 
   } else {
     if(els[1].className ) {els[i].className = els[i].className +  ' button ' ; } else { els[i].className = ' button '; }
} } } }

There are  - loading -  comments....

Other Recent Stories...

  1. 05/05/2016Is the growing social-sourced economy the modern back door into socialism?Is the growing social-sourced economy the modern back door into socialism? I read a really insightful post a couple of days ago that suggested the use of social network funding sites like “Go Fund Me” and “Kickstarter” have come about and gained popularity in part because the existing economy in no longer serving its purpose for anyone who isn’t already wealthy. Have the traditional ways to get new ventures funded become closed to all but a few who aren’t already connected to them and so onerous as to make ...... 
  2. 04/20/2016Want to be whitelisted? Here are some sensible rules for web site advertisingAn increasing number of websites are now detecting when users have ad-blocking enabled, and refuse to show content unless you "whitelist" their site (disable your ad-blocking for them). I think that is a fair decision on their part, it's how they pay for the site. However, if you want me (and many others) to white list your site, there are some rules you should follow. If you violate these rules, I won't whitelist your site, I'll just find content elsewhere. 1. The total space taken up by advertisements ...... 
  3. 12/30/2015Fantastic new series on Syfy called “The Expanse” – for people who love traditional science fiction[] “The Expanse” is a new science fiction series being broadcast onthe Syfy channelthis winter. It’s closely based on a series of books by author James S. A. Corey beginning with “Leviathan Wakes”. There are 5 books in the “Expanse” series so far. If you’re a fan of the novels you’ll appreciate how closely the books are followed.TIP: The first five episodes are already available on If you’re having trouble getting into the characters and plot, use those to get up to speed.The worlds created for ...... 
  4. 10/20/2015My suggestion is to stay away from PayAnywhere(dot)com  
  5. 08/07/2015Here is one for you VMWARE gurus - particularly if you run ESXi without fancy drive arrays 
  6. 08/06/2015The Killer of Orphans (Orphan Documents) 
  7. 06/02/2015Homeopathic Marketing: Traveler on my Android is now calling itself VERSE. Allow me to translate that for the IBM Notes community... 
  8. 03/17/2015A review of British Airways Premium Economy Service – How to destroy customer goodwill all at once 
  9. 02/26/2015There's a bug in how @TextToTime() and @ToTime() process date strings related to international standards and browser settings. 
  10. 01/21/2015Delivering two new presentations at Developer Camp (EntwicklerCamp) 2015 in Germany 
Click here for more articles.....

pen icon Comment Entry
Your Name
*Your Email
* Your email address is required, but not displayed.
Your thoughts....
Remember Me  

Please wait while your document is saved.