Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Change CSS of an Input

stokkup2313 priority asked 8 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 8 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 8 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