如何在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 对文本输入框做了默认美化,使用 inputlabel 配合即可实现浮动标签效果。

基本写法:


  
  

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

选择框(Selects)

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

步骤如下:

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

  
  

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

复选框与单选按钮(Checkboxes & Radio Buttons)

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

复选框示例:

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

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

开关按钮(Toggle Switches)

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


  

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

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