Bulma textarea CSS 类是 input 元素 的多行版本
赞助商
文本域
多行文本域及其变体
示例
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-link"
placeholder="Link textarea"
></textarea>示例
HTML
<textarea
class="textarea is-primary"
placeholder="Primary 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>
你可以通过将 is-small、is-medium 或 is-large 附加到 control 容器来调整加载旋转器的尺寸。
<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>