Bulma 的 textarea CSS 类就是 input 元素的多行版本：
文本区（Textarea）
多行文本区（textarea）和它的变体
示例
HTML
<textarea class="textarea" placeholder="e.g. Hello world"></textarea>
您可以用 rows HTML 属性设定文本区高度。
示例
HTML
<textarea class="textarea" placeholder="10 lines of textarea" rows="10"></textarea>颜色 #
textarea 元素可用颜色：
示例
HTML
<textarea class="textarea is-primary" placeholder="Primary textarea"></textarea>示例
HTML
<textarea class="textarea is-link" placeholder="Link textarea"></textarea>示例
HTML
<textarea class="textarea is-info" placeholder="Info textarea"></textarea>示例
HTML
<textarea class="textarea is-success" placeholder="Success textarea"></textarea>示例
HTML
<textarea class="textarea is-warning" placeholder="Warning textarea"></textarea>示例
HTML
<textarea class="textarea is-danger" placeholder="Danger textarea"></textarea>型号 #
textarea 元素有 4 种不同型号：
示例
HTML
<div class="field">
<div class="control">
<textarea class="textarea is-small" placeholder="Small textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea" placeholder="Normal textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-medium" placeholder="Medium textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control">
<textarea class="textarea is-large" placeholder="Large textarea"></textarea>
</div>
</div>状态 #
Bulma 为 textarea 元素定制了不同的状态。每一种状态可用伪类和 CSS 类设置：
-
:hover和is-hovered -
:focus和is-focused -
:active和is-active
这使得您可以不需要触发而获得特定状态。
普通
示例
HTML
<div class="control">
<textarea class="textarea" placeholder="Normal textarea"></textarea>
</div>悬停
示例
HTML
<div class="control">
<textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
</div>聚焦
示例
HTML
<div class="control">
<textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
</div>加载中
示例
HTML
<div class="control is-loading">
<textarea class="textarea" placeholder="Loading textarea"></textarea>
</div>
您可以通过在 control 容器上添加 is-small、is-medium 或 is-large 修饰符来设定加载旋钮的大小。
<div class="field">
<div class="control is-small is-loading">
<textarea class="textarea is-small" placeholder="Small loading textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control is-loading">
<textarea class="textarea" placeholder="Normal loading textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control is-medium is-loading">
<textarea class="textarea is-medium" placeholder="Medium loading textarea"></textarea>
</div>
</div>
<div class="field">
<div class="control is-large is-loading">
<textarea class="textarea is-large" placeholder="Large loading textarea"></textarea>
</div>
</div>禁用
示例
HTML
<div class="control">
<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
</div>只读
如果您用 readonly HTML 属性，文本区将看起来除了不可编辑和没有阴影外跟普通文本区没什么区别。
示例
HTML
<div class="control">
<textarea class="textarea" readonly>This content is readonly</textarea>
</div>固定大小
您可以通过添加 has-fixed-size 修饰符禁用 textarea 重置大小功能：
示例
HTML
<div class="control">
<textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>
</div>
此页面为开放源码页面。
发现排版问题？或者表达模糊？
在 GitHub 改进该页内容
