CSS 模板参考指南

为用户登录过程配置公司品牌可提供应用程序中的无缝体验，这些体验使用 Microsoft Entra ID 作为标识和访问管理服务。 如果使用 CSS 模板 作为 自定义公司品牌 过程的一部分，请使用此 CSS 参考指南。

弃用自定义 CSS 定位属性

作为Microsoft安全未来计划一部分，Microsoft Entra ID即将停用对公司品牌中的自定义 CSS 定位属性的支持。 这些属性控制元素在登录页上的显示位置，以及元素的分层、大小和显示方式。 例如，它们可以移动、重叠、调整大小或隐藏页面内容。 停用它们可使登录页面布局在Microsoft Entra ID保持一致且可预测。

此更改是完全停用自定义 CSS 功能的第一步。 Microsoft计划在该停用之前提供提前通知、建议的迁移路径和未来的高级自定义选项。

有关详细信息，请参阅博客文章Microsoft Entra ID增强品牌登录的安全性。

日程表

• 2026 年 7 月 21 日之后：尚未使用受影响定位属性的租户无法配置它们。
• 稍后：将全局弃用受影响的定位属性。 弃用后，这些属性将被阻止，不再起作用。
• 最终：自定义 CSS 将完全停用。 Microsoft在停用之前将分享更多指导，包括建议的迁移路径。

受影响的人

此更改会影响Microsoft Entra ID租户在其自定义 CSS 中使用任何已弃用的位置属性的组织。 Microsoft Entra 外部 ID租户不受影响。 尚未使用这些属性的租户不会受到影响，因为它们无法在 2026 年 7 月 21 日之后配置属性。

Microsoft提前通知受影响的客户。

已弃用的属性

如果自定义 CSS 使用以下任何属性，请将其从配置中删除。 这些属性不支持迁移或替换。

• position （包括 top、 right、 bottom、 left和 z-index）
• margin （包括 margin-top、 margin-bottom、 margin-left和 margin-right）
• transform
• translate
• opacity
• overflow
• filter
• pointer-events
• clip-path
• mix-blend-mode

HTML 选择器

以下 CSS 样式将成为整个页面的默认正文和链接样式。 应用于其他链接或文本的样式将覆盖这些选择器。

• body - 整个页面的样式
• 链接的样式：
  • a, a:link - 所有链接
  • a:hover - 鼠标悬停在链接上时
  • a:focus - 链接具有焦点时
  • a:focus:hover - 当链接具有焦点 并 鼠标悬停在链接上时
  • a:active - 单击链接时

Microsoft Entra CSS 选择器

使用以下 CSS 选择器配置登录体验的详细信息。

• .ext-background-image - 在默认 Lightbox 模板中包含背景图像的容器

• .ext-header - 容器顶部的标头

• .ext-header-logo - 容器顶部的标头徽标

  

• .ext-middle - 全屏背景的样式，该背景垂直对齐登录框与中间和水平对齐到中心

• .ext-vertical-split-main-section - 垂直拆分模板中部分屏幕背景容器的样式，该模板包含登录框和背景（此样式也称为 Active Directory 联合身份验证服务（ADFS）模板）。

• .ext-vertical-split-background-image-container - 垂直拆分/ADFS 模板中的登录框背景

• .ext-sign-in-box - 登录框容器

• .ext-title - 标题文本

  

• .ext-subtitle - 字幕文本

• 链接的样式：

  • .ext-link - 内部导航链接

• 主按钮的样式：

  • .ext-button.ext-primary - 主按钮默认样式
  • .ext-button.ext-primary:hover - 鼠标悬停在按钮上时
  • .ext-button.ext-primary:focus - 按钮具有焦点时
  • .ext-button.ext-primary:focus:hover - 当按钮具有焦点 并 鼠标悬停在按钮上时
  • .ext-button.ext-primary:active - 单击按钮时

  

• 辅助按钮的样式：

  • .ext-button.ext-secondary - 辅助按钮
  • .ext-button.ext-secondary:hover - 鼠标悬停在按钮上时
  • .ext-button.ext-secondary:focus - 按钮具有焦点时
  • .ext-button.ext-secondary:focus:hover - 当按钮具有焦点 并 鼠标悬停在按钮上时
  • .ext-button.ext-secondary:active - 单击按钮时

  

• .ext-error - 错误文本

  

• 文本框的样式：

  • .ext-input.ext-text-box - 文本框
  • .ext-input.ext-text-box.ext-has-error - 出现与文本框关联的验证错误时
  • .ext-input.ext-text-box:hover - 鼠标悬停在文本框上方时
  • .ext-input.ext-text-box:focus - 当文本框具有焦点时
  • .ext-input.ext-text-box:focus:hover - 当文本框具有焦点 并 鼠标位于文本框上时

  

• .ext-boilerplate-text - 登录框底部的自定义消息文本

• .ext-promoted-fed-cred-box - 登录选项文本框

  

• 页脚的样式：

  • .ext-footer - 页面底部的页脚区域
  • .ext-footer-links - 页面底部页脚中的链接区域
  • .ext-footer-item - 页面底部页脚中的链接项（如“使用条款”或“隐私 & cookie” ）
  • .ext-debug-item - 在页面底部的页脚中调试详细信息省略号