You can’t currently use CSS to target input elements of a specific type. (i.e. radio, text, etc). This can be a pain when you want to set padding on radio buttons, or a width on textfields. Today’s issue was adding left padding to a button.

I decided to throw together some script to find these elements and apply the appropriate style info, and this is what I came up with:


function cssInputTypeFix(tipe, stile,val) {
  <!-- until browsers support CSS input type -->
  var inputs = document.getElementsByTagName("input");
     for (var i = 0; i < inputs.length; i++) {
         if (inputs[i].getAttribute("type") == tipe) {
             inputs[i].style[stile]= val;
         }
      }
   }

I then applied this when the page loaded, with Simon Willison’s handy dandy addLoadEvent script


addLoadEvent(function() {
   //cssInputTypeFix(type,style,val)
   cssInputTypeFix('button', 'marginLeft', '5px');
   }
)

And of course, as soon as I finished I did a search on the web and found this article: http://www.dustindiaz.com/input-element-css-woes-are-over/ It is along the same lines, although he creates styles such as input.text, input.button and uses the onload event to append the appropriate classname. Well, mine can do that too :)

cssInputTypeFix(‘button’, ‘className’, ‘button’)

where you have a class named button.

Enjoy this post? Forward it to a friend or submit it to a social bookmarking site so others can read it as well. These icons link to social bookmarking sites where readers can share and discover new web pages.
  • StumbleUpon
  • TwitThis
  • Facebook
  • Mixx
  • Reddit
  • del.icio.us
  • Sphinn
  • Google
  • E-mail this story to a friend!