I'm dealing with a simple input field of type text:
<input matInput type="text" placeholder="{{placeholder}}" class="input-field"
[ngClass]="{'error': hasErrors}" [readonly]="isReadonly" [disabled]="isDisabled">
To style the readonly state, I've added this css rule using the read-only selector:
.input-field {
&:read-only {
border-style: none;
}
}
Everything looks fine except for when I click on the placeholder, the focus event adds a border:
https://i.stack.imgur.com/56IMU.png
To remove that unwanted border on focus, I tried using the :focus selector with border: none, but it didn't work. I attempted:
.input-field {
&:read-only,:focus {
border-style: none;
}
}
and
.input-field {
&:read-only {
border-style: none;
&:focus {
border-style:none;
}
}
}
However, the border persists. I initially tested this in Chrome and then in Firefox with no success.