overcoming poor browser support for CSS3 input[type]

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.

One thought on “overcoming poor browser support for CSS3 input[type]

  • You can match attributes and attribute values in css to only apply styles to specific elements.

    The reference is REC-CSS2-19980512 section 5.8.1

    I use this to display an image in front of links that deosn’t contain wiki.pl in the href.

    .wikitext a:before {
    content: url(“/images/remote.gif”);
    }
    .wikitext a[href*=”wiki.pl”]:before {
    content: “”;
    }

    As to adding padding to a button”

    input[type=”button”] {
    /* add 1em of space to the left of the button text */
    padding-left: 1em;
    /* add 1em of space th the left of the button */
    margin-left: 1em;
    }

    hth
    Nowell

Comments are closed.