Does `min-width` not work on form `input[type="button"]` elements?
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 notmin-width min-widthworks with other elements, just not "button" selector- This开发者_StackOverflow is on chrome/safari. Not an IE issue.
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.
While investigating this answer, I found that altering the border-color property of a button also enables the min-width CSS property in Chrome. (It also disables several built-in properties, like the default button background color, so use with caution.)
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;"
Yes... it does work provided you style it this way:
input[type="submit"], button, .button, a.actionlink {
cursor: pointer;
display: inline-block;
font-family: "Arial","Verdana","Helvetica","sans-serif";
font-size: 12px;
font-weight: bold;
min-width: 85px;
-moz-outline: 0 none;
outline: 0 none;
padding-bottom: 7px;
padding-top: 7px;
text-align: center;
}
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.
min-width isn't supported and/or is buggy in older versions Internet Explorer.
You can see a compatibility table here.
Here is an example of min-width being used on a form element, it is always wise to set a width property to it too.
<html>
<head>
<title>TAG index</title>
<style type="text/css">
.example {
width: 100%;
max-width: 600px;
min-width: 500px;
}
textarea {
height: 10em;
}
</style>
</head>
<body>
<p>minimum width:500px - maximum width:600px</p>
<form method="POST" action="example.cgi">
<p><input type="text" name="item1" class="example"></p>
<p><select name="item2" class="example">
<option value="select1">Select1</option>
<option value="select2">Select2</option>
<option value="select3">Select3</option>
</select></p>
<p><textarea name="item3" cols="50" rows="10" class="example"></textarea></p>
</form>
</body>
</html>
I just encountered like this issue and find the way to fix. But using button tag, not input.
input[type="button"] {
min-width:100px;
}
--[change to]-->
button {
width:auto;
min-width:100px;
}
加载中,请稍侯......
精彩评论