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