Textarea

Textarea についても Input と変わるところはない。せいぜい Sizes で文字の大きさが変わるぐらい。Rounded は意味が無いので作らない。

基本形

通常のシンプルなTextarea。初期4行、最大22行

[html]

<textarea class="textarea" placeholder="Hello world"></textarea>

初期１０行バージョン

[html]

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

Border Colors

[markdown]

<textarea class="textarea bdr-color" placeholder="Textarea with color line."></textarea>
{: style="--bdr-color:aqua"}

Textarea はブロック要素だから、次の行にクラス指示を書いても認識しますね。

Sizes

.small < デフォルト < medium < largeの順で、中に書けるテキストのサイズがおおきくなる。

Hoverable

基本的に Input と同じです。

[markdown]

<textarea class="textarea hoverable" placeholder="Hoverable textarea"></textarea>
{: style="--hoverable-bg:ghostwhite; --hoverable-bdr-color:royalblue; --hoverable-shadow:inset 2px 2px 8px rgba(65, 105, 225, 0.2);"}

デフォルト(.hoverableのみ指定)の場合

Checkbox, Radio

テェックボックスやラヂオボタンはデフォルトでもさほど変わらないので、作らないことにします。

Select

ただ、select要素はブラウザのデフォルトのままだとあまりいい感じではないので。少しだけアレンジしましょう。カラーとスタイルのアレンジだけにします。

基本形

Bulma のデザインに合わせるとだいたいこんな感じ。

HTML はこうなってます。select要素は擬似要素が付けられないので、:afterでブルーの矢印を付けるために外側を div で囲み、その div にselectクラスを付けます。multiple属性 をつけた場合は、外側の div にもmultipleクラスを付けます。

[markdown]

<div class="select">
  <select>
    <option>Select dropdown</option>
    <option>Options A</option>
    <option>Options B</option>
  </select>
</div>

<div class="select multiple">
  <select multiple size="8">
    <option value="Argentina">Argentina</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Brazil" selected>Brazil</option>
    <option value="Chile">Chile</option>
    <option value="Colombia">Colombia</option>
    <option value="Ecuador">Ecuador</option>
    <option value="Guyana">Guyana</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Suriname">Suriname</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Venezuela">Venezuela</option>
  </select>
</div>

Border Colors

ボーダーと矢印の色を変更します。multipleクラスの場合はボーダーだけ変化します。

markdown のクラス指定を書く場所は外側の最後。末尾の</div>に続けて書いても問題なし。

[markdown]

<div class="select bdr-color">
  <select>
    <option>Select dropdown</option>
    <option>Options A</option>
    <option>Options B</option>
  </select>
</div>  <!-- ここでもOK -->
{: style="--bdr-color:aqua;"}

SCSS は少し工夫が要ります。 他でも使いまわしているので Mixin になっています。

[scss]

@mixin border-color-set { 
  border-color: var(--bdr-color); 
}

.select.bdr-color, .select:not(.multiple).bdr-color {
  select {
    @include border-color-set;
  }
  &::after {
    @include border-color-set;
  }
}

Rounded

Form は markdown で書けないんで、HTML書いてるのとおんなじで何だか意味無いですね(笑)

まあ Select の multiple じゃないほうは角丸版も作っときましょう。

[markdown]

<div class="select rounded">
  <select>
    <option>Select dropdown</option>
    <option>Options A</option>
    <option>Options B</option>
  </select>
</div>

border-radiusを調整したもの。

[markdown]

<div class="select rounded bdr-rad">
  <select>
    <option>Select dropdown</option>
    <option>Options A</option>
    <option>Options B</option>
  </select>
</div>
{: style="--bdr-rad:12px"}

Hoverable

hoverableクラスのデフォルト。markdown は multiple でない方のみ載せます。

[markdown]

<div class="select hoverable">
  <select>
    <option>Select dropdown</option>
    <option>Options A</option>
    <option>Options B</option>
  </select>
</div>

hover時の挙動をアレンジしたもの。

[markdown]

<div class="select hoverable">
  <select>
    <option>Select dropdown</option>
    <option>Options A</option>
    <option>Options B</option>
  </select>
</div>
{: style="--hoverable-bg:ghostwhite; 
          --hoverable-bdr-color:royalblue; 
          --hoverable-shadow:inset 2px 2px 8px rgba(65, 105, 225, 0.2);"}