🌊

Material Design Bootstrap(MDB)でフォームのボーダーの色を変更する方法

2022/12/25に公開約800字

株式会社TECH LUCKという会社で代表兼エンジニアをしている齊藤です。
Material Design Bootstrap(MDB)でCSSを以下のように設定すると、フォームの色とプレースホルダーのテキストの色を変更してくれます。
!importantを存分に使ってしまっているので、参考程度にお願いします。

# フォーカスしていない時の色の変更
.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がつくだけ。)

.form-control.is-invalid:focus ~ .form-notch div {
border-color:  !important;
}

.form-control.is-invalid:focus ~ .form-label {
color: blue !important;
}

参考にした記事
https://mdbootstrap.com/support/react/change-focus-border-color/

Discussion

ログインするとコメントできます