为什么 Materialise CSS 表单不包含在盒子中？

【问题标题】：Why is Materialize CSS forms not enclosed in boxes?为什么 Materialise CSS 表单不包含在盒子中？
【发布时间】：2018-03-05 07:04:17
【问题描述】：

如何在 Materialise CSS 中创建类似于 Bootstrap 4 http://v4-alpha.getbootstrap.com/components/forms/ 中的表单。以下仅显示输入字段的下划线，而不显示包含框？

    <input placeholder="Placeholder" id="first_name" type="text" class="validate">
      <label for="first_name">First Name</label>
    </div>

【问题讨论】：

标签： css html material-design materialize bootstrap-4

【解决方案1】：

您可以使用“!important”覆盖 Materialize CSS 样式。
我制作了一个 CodePen 来使用给定的标记来演示相同的内容。 (https://codepen.io/anon/pen/yzVXWN)
另请注意，我已在 CodePen 中包含 Materialize CSS 样式表来测试这一点。
您可以在开始和结束 <style> 标记之间复制和粘贴 CSS 脑袋里面是这样的：

<style>
#first_name{
  display: block!important;
  width: auto !important;
  padding: .5rem!important;
  border: 1px solid rgb(0,0,0);
  transition: all 1s;
  border-radius: .25rem!important;
  box-shadow: none;
}

#first_name:focus{
  border-color: blue!important;
}
label{
  color:#9e9e9e!important;
}
</style>

希望有帮助:)

【讨论】：

这是一个很大的帮助。