多行文本框(textarea)

多行文本框textarea及其变体

文本输入框textareainput 的多行版本:

Example

HTML

<textarea class="textarea" placeholder="e.g. Hello world"></textarea>

你可以通过设置HTMl属性 rows 来控制输入框的高度,也就是行数。

Example

HTML

<textarea class="textarea" placeholder="10 lines of textarea" rows="10"></textarea>

颜色 #

textarea 元素可以使用下面的颜色:

Example

HTML

<textarea class="textarea is-primary" placeholder="Primary textarea"></textarea>

Example

HTML

<textarea class="textarea is-link" placeholder="Link textarea"></textarea>

Example

HTML

<textarea class="textarea is-info" placeholder="Info textarea"></textarea>

Example

HTML

<textarea class="textarea is-success" placeholder="Success textarea"></textarea>

Example

HTML

<textarea class="textarea is-warning" placeholder="Warning textarea"></textarea>

Example

HTML

<textarea class="textarea is-danger" placeholder="Danger textarea"></textarea>

大小 #

textarea 元素有4种类型的大小(即里面字体的大小):

Example

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 and is-hovered
  • :focus and is-focused
  • :active and is-active

这允许您获得特定状态的样式,而不必触发它。

Normal

Example

HTML

<div class="control">
    <textarea class="textarea" placeholder="Normal textarea"></textarea>
  </div>

鼠标悬停Hover

Example

HTML

<div class="control">
    <textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
  </div>

焦点Focus

Example

HTML

<div class="control">
    <textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
  </div>

加载中Loading

Example

HTML

<div class="control is-loading">
    <textarea class="textarea" placeholder="Loading textarea"></textarea>
  </div>

你可以通过附加下面修饰符,改变控件的大小。 is-small, is-medium or 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>

禁用

Example

HTML

<div class="control">
    <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
  </div>

只读Readonly

如果你用了HTML只读属性 readonly ,文本框内文字将不能编辑。注意只读属性是加在HTML内,不是在class内。

Example

HTML

<div class="control">
    <textarea class="textarea" readonly>This content is readonly</textarea>
  </div>

固定大小

你可以通过修饰符has-fixed-size来禁止textarea 调整大小,则右下角可向下拖动的图标将消失。

Example

HTML

<div class="control">
    <textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>
  </div>

返回头部

问题反馈
返回顶部