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 '; }
} } } }
Comment Entry |
Please wait while your document is saved.