css :focus selector not working for input

Question

I have a simple input of type text:

<input matInput type="text" placeholder="{{placeholder}}" class="input-field"
    [ngClass]="{'error': hasErrors}" [readonly]="isReadonly" [disabled]="isDisabled">

I've added this css rule for readonly state, using the read-only selectore:

.input-field {
    &:read-only {
        border-style: none;
    }
}

And I have this, which is correct:

The problem is that when I click on the placeholder, the focus event adds the border:

I need to get rid of that border on focus, so using :focus selector I've tried setting border: none but it doesn't work. I've tried:

.input-field {
    &:read-only,:focus {
        border-style: none;
    }
}

and

.input-field {
    &:read-only {
        border-style: none;

      &:focus {
         border-style:none;
      }
    }
}

but the border keeps appearing. I am using Chrome, but I've also tried Firefox and it doesn't work.

This is an outline, not a border.

cloned
– cloned

2020-07-09 11:17:39 +00:00
Commented Jul 9, 2020 at 11:17 — cloned
– cloned, Commented Jul 9, 2020 at 11:17
@cloned still doesn't work with outline:none

User978438
– User978438

2020-07-09 12:09:55 +00:00
Commented Jul 9, 2020 at 12:09 — User978438
– User978438, Commented Jul 9, 2020 at 12:09

aiyodev · Accepted Answer · 2020-07-09 12:16:19Z

1

Add this to your focus:

{ outline-style: none; box-shadow: none; border-color: transparent; }

answered Jul 9, 2020 at 12:16

aiyodev

134 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css :focus selector not working for input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related