In one of my projects I have used input[type="button"] to apply a style to all the buttons. It works fine in all browsers except Internet Explorer 6. It doesn't style the buttons.

Is there a solution for this, like creating some class for the button and applying it to all buttons?

I want to apply that class to all buttons but not manually. I think it's possible to use jQuery for this, could you please help me with this?

In one of my projects I have used input[type="button"] to apply a style to all the buttons. It works fine in all browsers except Internet Explorer 6. It doesn't style the buttons.

Is there a solution for this, like creating some class for the button and applying it to all buttons?

I want to apply that class to all buttons but not manually. I think it's possible to use jQuery for this, could you please help me with this?

• javascript
• jquery
• css
• forms
• internet-explorer-6

• Can you give us an example what's wrong with IE. I suspect that this is probably some CSS not beign correctly interpreted on IE issue. – RaYell Commented Jul 24, 2009 at 7:14

6 Answers 6

I usually like not to use JavaScript for this, so I add class="text" for <input> elements that are of text type, class="button" for <input> elements that are of button type, and so on. Then I can match them with input.text etc.

While you don't want to do it manually, I consider it better practice. If you still want to do it with jQuery, you do it like this:

$('input:button').addClass('button');
// Or to include <button> elements:
$('button, input:button').addClass('button');

// Text inputs:
$('input:text').addClass('text');
// And so on...

$(":button").addClass("yourclassname");

This matches all button elements and input elements of type button and adds class to them.

have you tried $(":button") ?

You can not do it automatically in IE6 without javascript. Here is how you can do it with jQuery

$(":button").addClass( "something" );

I wouldn't use jQuery unless you need it elsewhere as loading a library or framework for such a simple task seems overkill.

I.E.6 doesn't understand CSS attribute selectors, correct, looks like Javascript is the only way.

Perhaps you could play with this code:

Buttons=Parent.getElementsByTagName("input"); // "Parent" could be "document" or the Id. of a form, fieldset, div etc.
Button=0;
while(Button<Buttons.length){
    if(Buttons[Button].getAttribute("type")=="button"){
        Buttons[Button].className="Whatever_Style_We_Want";
    }
    Button++;
};

I've not tried or tested that but the snippet is something to play with. It may even work right out of the box!

This works to apply all styles to buttons in JavaScript

const buttons = document.getElementsByTagName('button');
    
    for(let i = 0; i < buttons.length; i++) {
        buttons[i].classList.add("my-button-class")
        buttons[i].classList.add("another-button-class")
    }