MS Teams自适应卡片Input.ChoiceSet下拉框显灰似禁用如何修改颜色

问题描述 #

基于MS Teams开发的机器人向频道发送自适应卡片时，卡片内使用的Input.ChoiceSet下拉选择组件默认显示为灰色，视觉效果和禁用控件高度相似，容易造成用户误解。
当前使用的组件JSON定义如下：

{
    type: 'Input.ChoiceSet',
    id: 'statusUpdate',
    choices: actionList,
    placeholder: 'Status update',
    value: 'Select an option',
}

问题效果参考：

可行处理方案 #

首先明确核心规则：MS Teams为了保证全平台客户端UI一致性，会强制重写自适应卡片内所有原生表单控件的样式，不支持通过JSON配置、自定义CSS注入的方式直接修改原生下拉框的默认显示颜色，所有尝试直接修改原生控件色值的方案都会被客户端拦截不生效。
你可以通过以下几种方式规避灰态带来的视觉歧义问题：

• 清理冗余配置修正渲染异常
  现有代码中value: 'Select an option'属于冗余配置，该值和placeholder文本重复，会导致Teams渲染时判定控件存在未匹配选项的默认值，加重灰态显示效果。移除该配置后，控件渲染逻辑会回归正常，和禁用控件的视觉差异会明显提升，修正后的代码参考：

  {
      "type": "Input.ChoiceSet",
      "id": "statusUpdate",
      "choices": "${actionList}",
      "placeholder": "选择状态更新类型",
      "style": "compact",
      "isMultiSelect": false
  }
  

  也可以将placeholder文本调整为更明确的可点击引导语，进一步降低用户的误解概率。
• 升级Teams客户端版本
  部分旧版本Teams桌面客户端存在ChoiceSet组件的样式渲染bug，将客户端升级到最新正式版后，下拉框未激活状态的对比度会做优化，灰态会变浅，和禁用态的半透明灰色有明确区分。
• 高自定义需求场景下用ActionSet模拟下拉交互
  如果对组件颜色、样式有强自定义要求，建议放弃原生Input.ChoiceSet组件，使用ActionSet配合级联弹出卡片模拟下拉选择逻辑：卡片表面放置可自定义颜色、文字样式的操作按钮，用户点击按钮后弹出选择面板完成选项提交，这种实现方式不受原生控件样式限制，可以按需调整显示效果。

注意：不要尝试通过自适应卡片的style属性传入自定义色值修改原生ChoiceSet样式，这类配置在Teams环境下不会生效。

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