CSS 模板引用指南

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

HTML 选择器

以下 CSS 样式已成为整个页面的默认正文和链接样式。 应用其他链接或文本的样式会替代 CSS 选择器。

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

Microsoft Entra CSS 选择器

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

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

• .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-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 - 页面底部页脚中的调试详细信息省略号