Topic: Change CSS of an Input

stokkup2313 priority asked 10 months ago


Expected behavior I would like to be able to change the way the input looks. Currently it seems theres a an outline around the form control / input but I just want to have a border at the bottom and not have it look like a closed input

Actual behavior the inputs are already styled to have a border / outline around it.

Resources (screenshots, code snippets etc.)How I want it to look


Rafał Seifert free answered 10 months ago


Please try to use such scss selector to set such styles. Remember to place it below your mdb import in your global styles.scss file.

@import 'mdb-angular-ui-kit/assets/scss/mdb.scss';

.form-outline .form-control,
.form-outline .form-control.active {
  ~ .form-notch {
    .form-notch-leading,
    .form-notch-middle,
    .form-notch-trailing {
      border: none;
      border-radius: 0;
      border-bottom: 1px solid gray;
      box-shadow: none;
    }
  }
}

Let me know if that serves your needs.


stokkup2313 priority answered 10 months ago


and also want to change when its on focus so when I click on the input I want to change the css as well!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.2.0
  • Device: Desktop
  • Browser: Chrome
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No