Does `min-width` not work on form `input[type="button"]` elements?

Question

Anyone see a reason why this isn't working? (works with width, just not min-width)

input[type="button"] {
    min-width: 100px;
}

EDIT: clarification

• "button" selector works with width, just not min-width
• min-width works with other elements, just not "button" selector
• This is on chrome/safari. Not an IE issue.

Answer 1

I found a simple answer here:

.button-class {
    box-sizing: unset;
    width: 100%;
    /* additional style properties */
}

This will set the width to be 100% of the parent. Basically you just need to unset the box-sizing property that prevents you from setting the width property. This solution works with <input type="button"> <input type="submit"> and <button> HTML tags.

Answer 2

I just ran into this problem too. min-width does work, but might not give you the results you expect or might appear not to work due to buttons having a default box-sizing of border-box. Try setting box-sizing: content-box on the button.

Answer 3

min-width should work perfectly, you just can't see effects maybe because you make min-width less than width.. anyway example for fine html code:

<input type="button" style="width:50px;height:5em;min-width:40px;"