🌊
Material Design Bootstrap（MDB）でフォームのボーダーの色を変更する方法
株式会社TECH LUCKという会社で代表兼エンジニアをしている齊藤です。
DXプロジェクト、開発プロジェクト、Rails開発などでお困りごとがありましたら弊社HPからご相談をいただけますと幸いです。
以下のような問題に対応することが可能です。
- プロジェクトでRailsエンジニアが足りなくて困っている
- Railsのバージョンアップをしたいがノウハウ・リソースが足りなくて困っている
- オフショア開発をしているが、要件の齟齬やコード品質が悪いので改善したい
また、Railsエンジニアも募集しておりますので、興味がありましたら弊社HPからご連絡いただけますと幸いです。
前提
Material Design Bootstrap（MDB）でCSSを以下のように設定すると、フォームの色とプレースホルダーのテキストの色を変更してくれます。
!importantを存分に使ってしまっているので、参考程度にお願いします。
実装方法
custom.css
# フォーカスしていない時の色の変更
.form-control ~ .form-notch div {
border-color: green !important;
}
.form-control ~ .form-label {
color: green !important;
}
# フォーカスしている時の色の変更
.form-control:focus ~ .form-notch div {
border-color: green !important;
}
.form-control:focus ~ .form-label {
color: green !important;
}
また、バリデーションにかかった際のフォームの色とプレースホルダーのテキストの色を変更するには以下のようにします。（.is-invalidがつくだけ。）
custom.css
.form-control.is-invalid:focus ~ .form-notch div {
border-color: !important;
}
.form-control.is-invalid:focus ~ .form-label {
color: blue !important;
}
参考にした記事
Discussion