表单样式问题：其他输入框需100%宽度，复选框行内max-width无效

嘿，我知道问题出在哪了！你现在的CSS里，#application-form input这个选择器把所有input元素（包括复选框）都套上了min-width: 100%，这就导致你加的行内max-width根本起不了作用——毕竟min-width规定了元素宽度至少得是100%，max-width再小也没用。

给你个简单的解决方案，只需要修改一下CSS的选择器，排除掉复选框类型的input就行：

#application-form label { 
  display: inline-block; 
  width: 100%; 
  box-sizing: border-box; 
  vertical-align: top; 
}
#application-form input:not([type="checkbox"]), #application-form select { 
  display: inline-block; 
  min-width: 100%; 
  margin-bottom: 10px; 
  background-color: #fafafa; 
  box-sizing: border-box; 
  vertical-align: top; 
}

这里用了:not([type="checkbox"])伪类，让CSS规则只作用于非复选框类型的input，这样复选框就不会被强制设置100%宽度了，你之前加的行内max-width也可以去掉，它会默认显示正常的大小。

如果之后还有其他特殊类型的input（比如radio单选框）不想占满宽度，也可以用同样的方法，把:not([type="checkbox"])改成:not([type="checkbox"]):not([type="radio"])就行。

内容的提问来源于stack exchange，提问作者Grey-lover