読者です 読者をやめる 読者になる 読者になる

Rails のフォームに Bootstrapのエラー用デザインを適用させる。

Rails のフォームで、validationに引っかかるとその要素に

.field_with_errors

ってクラスがつくのですが、画像のようにBootstrapのフォーム用のエラーCSSを適用させる方法。

f:id:hrysd:20121224213347p:plain

僕はBootstrapのsassバージョンを使用してるので、以下のようなファイルを作成して application.css.sass から

@import base

とかしてる。で、肝心な部分は

  • base.css.sass
.field_with_errors
  @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%))
  @extend .error

最後に

手軽にそれっぽいデザインできるの楽でいい。