如何用CSS隐藏placeholder为‘Max contacts added’的禁用input标签？

我使用的单选PeoplePicker在达到最大联系人添加数时，会显示一个禁用的input标签，其placeholder为“Max contacts added”，对应的DOM代码如下：

<input 
  class="control" 
  part="control" 
  id="control" 
  placeholder="Max contacts added" 
  type="text" 
  aria-atomic="true" 
  aria-label="Maximum contact selections reached" 
  aria-live="assertive" 
  disabled="true"
>

尝试用#control和.control选择器设置display:none，但该标签始终无法隐藏，请问如何用CSS正确选中并隐藏它？

解决方案 #

1. 利用Web Component的::part()选择器 #

该input带有part="control"属性，这是Web Component暴露样式接口的标准方式，直接通过::part()选择器即可选中：

::part(control) {
  display: none !important;
}

如果知道组件的宿主标签（比如<people-picker>），可以更精准地定位：

people-picker::part(control) {
  display: none !important;
}

2. 提高选择器优先级覆盖原有样式 #

如果常规选择器无效，大概率是原有样式的优先级更高。可以结合多个属性构建高优先级选择器，再加上!important强制覆盖：

input#control.control[disabled][placeholder="Max contacts added"] {
  display: none !important;
}

说明 #

• !important用于强制覆盖组件自带的样式规则，确保自定义样式生效；
• 若该input处于shadow DOM内部，常规选择器无法穿透，必须使用::part()或组件提供的样式API来修改。

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