LoginSignup
1

More than 5 years have passed since last update.

Bem

Last updated at Posted at 2015-03-20

HTML

デフォルト

default.png

jade
div.formItem
  dl.formItem__contents
    dt.formItem__heading
      span.formItem-label 必須
      br
      span お名前
    dd.formItem__input
      input(type="text" name="firstName" placeholder="例:進学")
    dd.formItem__input
      input(type="text" name="lastName" placeholder="例:花子")

エラー

error.png

jade
div.formItem
  dl.formItem__contents
    dt.formItem__heading
      span.formItem-label 必須
      br
      span お名前
    dd.formItem__input--error
      input(type="text" name="firstName" placeholder="例:進学")
    dd.formItem__input--error
      input(type="text" name="lastName" placeholder="例:花子")

CSS

stylus
.formItem
  .formItem__input
    border 1px solid #666
    border-radius 5px
    background #fff

  .formItem__input--error
    @extend .formItem__input
    background #fdd

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1