css: селектор фокуса не работает для ввода

Question

У меня есть простой ввод текста типа:

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

Я добавил это правило css для состояния readonly, используя read-only selectore:

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

А у меня это правильно:

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

введите описание изображения здесь

Мне нужно избавиться от этой границы в фокусе, поэтому, используя селектор :focus, я пробовал установить border: none, но он не работает. Я пробовал:

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

и

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

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

, но рамка продолжает появляться. Я использую Chrome, но я также пробовал Firefox, и он не работает.

Answer 1

Добавьте это в фокус:

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