为原生Material Select应用CSS样式，使其接近Mat Select风格

完全可行，你可以通过自定义CSS来调整<select matNativeControl>的外观，使其与Angular Material的mat-select样式趋近一致，以下是具体实现方式：

核心思路 #

由于你已经用<mat-form-field>包裹了原生select，我们可以基于这个容器定位元素，覆盖原生select的默认样式，同时模拟mat-select的下拉箭头、状态变化等视觉特征。

自定义CSS代码 #

将以下样式添加到你的组件样式文件（如component.scss）或全局样式文件中：

/* 覆盖原生select的默认样式 */
:host mat-form-field.mat-form-field-appearance-fill select.mat-native-control {
  /* 移除原生下拉箭头 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 调整内边距，让文字与自定义箭头位置协调 */
  padding-right: 2.5em;
  /* 移除默认聚焦轮廓，由mat-form-field提供边框高亮 */
  outline: none;
}

/* 添加自定义下拉箭头，模拟mat-select样式 */
:host mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper::after {
  content: "";
  position: absolute;
  right: 1.25em;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0,0,0,0.54);
  pointer-events: none;
}

/* 聚焦状态下的箭头颜色变化，匹配Material主题主色 */
:host mat-form-field.mat-form-field-appearance-fill.mat-focused .mat-form-field-wrapper::after {
  border-top-color: #1976d2;
}

/* hover状态下的背景调整，贴近mat-select的交互反馈 */
:host mat-form-field.mat-form-field-appearance-fill:hover .mat-form-field-flex {
  background-color: rgba(0,0,0,0.04);
}

样式说明 #

• 移除原生select的默认箭头，避免与自定义箭头冲突；
• 自定义箭头采用和mat-select一致的三角形样式，位置对齐输入框右侧；
• 聚焦时箭头颜色切换为Material主题的主色，保持交互状态一致性；
• hover时添加浅背景色，模拟mat-select的hover反馈；
• 使用:host限定样式作用域，避免影响其他组件的表单元素。

如果需要进一步调整细节（如字体、圆角等），可以根据mat-select的默认样式参数进行微调，最终能实现视觉高度接近的效果。

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