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 使用：
基本上就这些。通过组合原生 Bulma 类与自定义 CSS 或 Sass 变量，能高效地打造符合项目需求的表单组件，既保留框架优势，又不失灵活性。
