Question 136839 in Html Question posted in
Some basic documentation can be found here.

Html – Remove input border from mat paginator

I am using a mat-paginator and it looks like this enter image description here

The only problem is that I want to erase the blue border that appears at the select input, but I can not figure out how to do it.

Tags:

3

Answers


  1. 0

    Out of the box: You can change it with Material themes.

    https://material.angular.io/guide/theming

    If you want to play dirty, you can also go at the CSS directly.

    .mat-mdc-form-field.mat-primary .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading, .mat-mdc-form-field.mat-primary .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch, .mat-mdc-form-field.mat-primary .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: #fff445;
}
    Login or Signup to reply.
  2. 0

    to remove the border you should use this.

    .mdc-notched-outline__trailing,
.mdc-notched-outline__notch,
.mdc-notched-outline__leading {
    border: none !important;
}

    this will delete the border, hope it works.

    Login or Signup to reply.
  3. 0

    In Angular Material v15, this ca be achieved as follows:

    ::ng-deep .mdc-notched-outline > * {
  border: none !important;
}

    This answer is inspired by https://stackoverflow.com/a/75258592/2358409

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search