如何为Blazor内置InputDate控件的日期选择器设置样式？

Blazor的InputDate控件本质是渲染浏览器原生的<input type="date">，日期选择器的样式由浏览器自带的规则控制，所以官方文档里不会有专门的配置说明——因为这不属于Blazor框架的控制范围，属于浏览器原生组件的样式范畴。

要解决深色主题下日期选择器显示白色的问题，有两种可行思路：

• 定制原生控件CSS
  不同浏览器有各自的CSS伪类/伪元素可以用来修改原生日期选择器的样式，这里给一个WebKit内核（Chrome、Edge）的示例：

  /* 针对InputDate渲染的原生date输入框 */
  input[type="date"] {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
  }
  
  /* 反色日期选择器的触发图标，适配深色背景 */
  input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
  
  /* 设置输入框内日期文本颜色 */
  input[type="date"]::-webkit-datetime-edit {
    color: #fff;
  }
  
  /* 隐藏默认的上下箭头按钮 */
  input[type="date"]::-webkit-inner-spin-button {
    display: none;
  }
  

  Firefox和Safari的伪类规则会有差异，需要针对性调整，你可以查对应浏览器的原生日期控件CSS定制说明。

• 改用第三方Blazor组件库
  如果原生控件的样式定制不够灵活，直接用支持深色主题的第三方组件库（比如Radzen、Syncfusion的Blazor日期选择器），这些组件自带完整的主题配置选项，文档里会明确说明如何切换深色模式。

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