CSS :focus选择器在只读文本输入框中失效问题排查

我明白你遇到的困扰：当matInput处于只读状态时，点击占位符会触发focus事件，导致你设置的无边框样式被覆盖，而且尝试的两种CSS写法都没生效。这大概率是因为Angular Material的内置样式优先级比你自定义的样式更高，或者你的选择器没有精准命中到实际获得焦点的元素。

下面是几个可行的解决方案，按优先级推荐：

方案1：提高选择器权重，精准命中只读且聚焦的输入框 #

Angular Material的matInput会在内部渲染原生<input>元素，我们可以用更具体的选择器来覆盖默认样式：

.input-field:read-only:focus {
  border-style: none !important;
  outline: none !important; /* 顺带去掉浏览器默认的聚焦外边框，避免残留样式 */
}

如果用嵌套SCSS写法的话：

.input-field {
  &:read-only:focus {
    border-style: none !important;
    outline: none !important;
  }
}

这里的关键细节：

• 把:read-only和:focus连写，确保只针对同时满足只读+聚焦状态的元素
• 加入!important是为了强行覆盖Angular Material的高优先级内置样式，如果通过更具体的选择器能生效（比如结合父容器类名），可以尽量不用!important

方案2：结合父容器类名提升选择器权重 #

如果你不想依赖!important，可以借助mat-form-field的类名来提高选择器权重——毕竟matInput是嵌套在mat-form-field内部的：

.mat-form-field .input-field:read-only:focus {
  border-style: none;
  outline: none;
}

这种写法通过增加父容器的类选择器，让自定义样式的权重超过Material的默认样式，不需要额外加!important也能生效。

方案3：从根源阻止只读状态下的focus事件 #

如果你的场景不需要只读输入框响应focus事件，可以直接在模板层面阻止focus触发：

<input 
  matInput 
  type="text" 
  placeholder="{{placeholder}}" 
  class="input-field" 
  [ngClass]="{'error': hasErrors}" 
  [readonly]="isReadonly" 
  [disabled]="isDisabled"
  (focus)="isReadonly && $event.preventDefault()"
>

当输入框处于只读状态时，点击占位符就不会触发focus事件，自然也就不会出现边框了。

为什么你原来的写法无效？ #

你之前尝试的两种写法存在的问题：

1. .input-field { &:read-only,:focus { border-style: none; } }——这里的逗号把选择器拆成了“只读的.input-field”和“任意聚焦的.input-field”两个独立规则，当元素同时满足只读+聚焦时，Angular Material的内置:focus样式因为权重更高会被优先应用。
2. .input-field { &:read-only { border-style: none; &:focus { border-style:none; } } }——这个写法逻辑是对的，但因为选择器权重不够，被Material的内置样式覆盖了。

内容的提问来源于stack exchange，提问作者User978438