Topic: Form/Input customization

Kaherdino priority asked 2 years ago

I'm looking for an easy way to customize all my form, by adding a border-radius for example.I try many sass-variables change or direct css modification, neither work.

Krzysztof Wilk staff commented 2 years ago


Is it possible to share your code with me? It'll be helpful :)

You can try to use more precise selectors to style i.e. the form-notch element inside an input. So the example selector could look like this: .form-outline .form-control~div.form-notch :)

Keep coding!

Kaherdino priority answered 2 years ago

Using sass variable ? Is not possible ?

Krzysztof Wilk staff commented 2 years ago


Yes, that's also possible. You can set up an mdb SCSS from these instructions: Then you can use scss/custom/_variables.scss to create a new one and overwrite it. In the case of border-radius you mentioned above, you can paste here i.e. $form-notch-leading-border-radius: 0.9rem; :)

Keep coding!

Kaherdino priority commented 2 years ago

Thanks but It's only at the end, see : Sorry but why it's not $input-border-radius ? As in the BS5 docs :

Where can I find any docs about form-notch-leading-border-radius ?

Krzysztof Wilk staff commented 2 years ago


Try updating these 2 variables - $form-notch-leading-border-radius and $form-notch-trailing-border-radius. There are some differences between MDB and Bootstrap because we improved some components (i.e. added form-notch div divided on 3 parts for better label handling).

I'm afraid there's no such page in our documentation for now.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No