CODEWITHSUNDEEP
htmlcssangular8
User978438
User978438

Reputation: 179

css :focus selector not working for input

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:

enter image description here

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

enter image description here

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.

Upvotes: 0

Views: 874

Answers (1)

aiyodev
aiyodev

Reputation: 13

Add this to your focus:

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

Upvotes: 1

Related Questions