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 - 容器顶部的标头徽标

    Screenshot of the sign-in screen with the .ext-header and .ext-header-logo areas highlighted.

  • .ext-middle - 全屏背景的样式，其中登录框在垂直方向上与中间对齐，在水平方向上与中心对齐

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

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

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

  • .ext-title - 标题文本

    Screenshot of the sign-in box, with the portion of the box that is styled with the .ext-sign-in-box selector.

  • .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 - 在单击按钮时

    Screenshot of the sign-in box with the primary - Next - button highlighted.

  • 辅助按钮的样式：

    • .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 - 在单击按钮时

    Screenshot of the sign-in box at the Sign-in options step, with the secondary - Back - button highlighted.

  • .ext-error - 错误文本

    Screenshot of the sign-in box with error text highlighted.

  • 文本框的样式：

    • .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 - 当文本框具有焦点且鼠标位于文本框上方时

    Screenshot of the sign-in box with the text box with sample text highlighted.

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

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

    Screenshot of the sign-in box with the optional boilerplate text area highlighted.

  • 页脚的样式：

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