Bulma可通过自定义css或sass变量灵活调整表单样式，包括输入框、选择框、复选框及布局。1. 修改.input和.textarea的边框、字体、聚焦效果；2. 用.custom-checkbox隐藏原生复选框并模拟自定义样式；3. 使用Sass变量如$input-border-color全局定制；4. 通过.field-horizontal实现水平表单布局。结合Bulma类与自定义样式，兼顾美观与灵活性。
Bulma 是一个基于 Flexbox 的现代 CSS 框架，提供了简洁、响应式的表单组件。虽然 Bulma 默认样式美观，但在实际项目中常需要自定义表单组件以匹配品牌风格或设计需求。通过覆盖其 Sass 变量或添加自定义 CSS，可以轻松实现个性化。
自定义输入框样式
Bulma 的表单输入（如 input 和 textarea）默认带有浅灰色边框和圆角。要修改这些样式，可以直接覆盖相关 CSS 属性。
例如，更改输入框的边框颜色、字体大小和聚焦效果：
.input, .textarea { border: 2px solid #ccc; border-radius: 4px; font-size: 16px; padding: 10px; } .input:focus, .textarea:focus { border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); outline: none; }
调整选择框与复选框外观
Bulma 对 select 下拉框提供基本样式，但原生下拉箭头无法直接用 CSS 修改。可通过包装容器和伪元素实现自定义下拉图标。
立即学习“前端免费学习笔记（深入）”；
对于复选框和单选按钮，建议隐藏原生控件，用自定义样式模拟：
.custom-checkbox { display: flex; align-items: center; } .custom-checkbox input[type="checkbox"] { opacity: 0; position: absolute; } .custom-checkbox .checkmark { width: 18px; height: 18px; border: 2px solid #4a90e2; border-radius: 4px; margin-right: 8px; position: relative; } .custom-checkbox input:checked + .checkmark::after { content: ''; position: absolute; left: 5px; top: 2px; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); background: #4a90e2; }
使用 Sass 变量深度定制
如果你使用 Bulma 的源码（Sass 版本），可以在引入前定义变量，全局调整表单组件样式。
例如，在引入 Bulma 前设置输入框的默认状态和聚焦颜色：
$input-border-color: #d0d0d0; $input-border-width: 2px; $input-hover-border-color: #b0b0b0; $input-focus-border-color: #4a90e2; $input-focus-box-shadow-size: 0 0 0 2px; $input-focus-box-shadow-color: rgba(74, 144, 226, 0.2); @import "bulma";
这种方法适用于需要统一设计系统的情况，避免重复写覆盖样式。
美化表单组布局
Bulma 的 field 和 control 类帮助组织表单结构。你可以在此基础上增加间距、对齐标签或实现水平布局。
例如，让标签左对齐并固定宽度：
.field-horizontal { display: flex; align-items: center; margin-bottom: 10px; } .field-label { width: 120px; text-align: right; padding-right: 10px; font-weight: normal; } .field-body { flex: 1; }
配合 html 使用：
<div class="field field-horizontal"> <label class="field-label">姓名</label> <div class="field-body"> <input class="input" type="text"> </div> </div>
基本上就这些。通过组合原生 Bulma 类与自定义 CSS 或 Sass 变量，能高效地打造符合项目需求的表单组件，既保留框架优势，又不失灵活性。