如何在CSS中使用Materialize制作表单控件_Materialize表单类快速美化

引入Materialize框架后，使用input-field容器和validate类可快速创建带浮动标签和验证的输入框；2. 通过select配合label并调用M.FormSelect.init()实现样式统一的下拉选择；3. 复选框与单选按钮需用label包裹input和span，确保点击文字可触发选择；4. 使用switch类包裹checkbox和lever滑块创建开/关切换按钮；5. 所有组件均依赖Materialize预设类，无需额外CSS即可实现美观响应式表单。

想快速做出好看又响应式的表单？Materialize 提供了一套现成的 CSS 类，让你无需写额外样式就能把普通的 HTML 表单变得整洁美观。只要引入 Materialize 框架，再用它定义好的类名，就能立刻提升表单的视觉效果和交互体验。

输入框（Input Fields）

Materialize 对文本输入框做了默认美化，使用 input 和 label 配合即可实现浮动标签效果。

基本写法：

<div class="input-field">
  <input id="name" type="text" class="validate">
  <label for="name">你的名字</label>
</div>

input-field 是关键容器类，label 会自动浮动到输入框上方。加上 validate 类后，还能在失去焦点时验证输入内容，显示错误或成功状态。

立即学习“前端免费学习笔记（深入）”；

选择框（Selects）

原生 select 在不同浏览器中样式不一，Materialize 能统一美化。

步骤如下：

• 外层包裹 input-field
• 给 select 添加 initialized 不需要手动初始化

<div class="input-field">
  <select>
    <option value="" disabled selected>选择一个选项</option>
    <option value="1">选项一</option>
    <option value="2">选项二</option>
  </select>
  <label>下拉选择</label>
</div>

记得在页面加载后调用 M.FormSelect.init() 启用 JavaScript 功能，或者使用自动初始化方式。

Creatext AI

专为销售人员提供的 AI 咨询辅助工具

39

查看详情

复选框与单选按钮（Checkboxes & Radio Buttons）

Materialize 替换了原生控件，用图标模拟更清晰的视觉反馈。

复选框示例：

<p>
  <label>
    <input type="checkbox" />
    <span>记住我</span>
  </label>
</p>

单选按钮类似，只需改 type 为 radio，并确保 name 相同：

<p>
  <label>
    <input name="group1" type="radio" checked />
    <span>男</span>
  </label>
</p>
<p>
  <label>
    <input name="group1" type="radio" />
    <span>女</span>
  </label>
</p>

label 包裹整个结构，点击文字也能触发选择。

开关按钮（Toggle Switches）

想要现代感更强的开关控件，可以用 switch 类。

<div class="switch">
  <label>
    关
    <input type="checkbox">
    <span class="lever"></span>
    开
  </label>
</div>

lever 是滑块部分，配合 label 内的文字实现“开/关”状态切换，视觉效果很直观。

基本上就这些常用控件。Materialize 的设计让表单既美观又易用，适合快速搭建管理后台或用户注册页。只要按结构写 HTML，样式自动生效，省时省力。

以上就是如何在CSS中使用Materialize制作表单控件_Materialize表单类快速美化的详细内容，更多请关注php中文网其它相关文章！