Azure Entra External ID自定义CSS样式问题求助

问题1：输入框占位符样式不生效 #

浏览器对::placeholder伪元素有不同私有前缀，且Azure默认样式优先级较高，原写法缺少前缀覆盖且权重不足。修改为以下代码：

.ext-input.ext-text-box::placeholder,
.ext-input.ext-text-box::-webkit-input-placeholder,
.ext-input.ext-text-box::-moz-placeholder,
.ext-input.ext-text-box:-ms-input-placeholder,
.ext-input.ext-text-box::-ms-input-placeholder {
    color: #6C7A8A !important;
}

• 补充各浏览器私有前缀确保兼容性
• 加!important强制覆盖Azure默认样式

问题2：身份横幅样式不生效 #

你使用的.identityBanner不符合微软仅允许ext-前缀类的限制，正确的目标类是.ext-identityBanner（Azure为该元素分配的带前缀类名），修改代码：

.ext-identityBanner {
    background-color: #2C3742 !important;
}

若仍不生效，可结合父元素提升选择器权重：

.ext-sign-in-box .ext-identityBanner {
    background-color: #2C3742 !important;
}

问题3：重置密码页面类名不一致问题 #

这是Azure Entra的设计限制——重置密码页面部分组件属于旧版实现，未添加ext-前缀。提供两种变通方案：

方案1：通过带ext-前缀的父元素定位目标元素 #

找到重置密码页面中包含boilerplate-text的ext-前缀父容器（比如.ext-reset-password-container），通过后代选择器样式化：

.ext-reset-password-container .boilerplate-text {
    background-color: #2C3742;
    color: white !important;
}

该写法符合微软对ext-前缀类的限制，因为选择器起始于带前缀的父类。

方案2：利用页面标识类定位 #

重置密码页面的body标签会带有ext-reset-password-page类，可结合该类定位：

body.ext-reset-password-page .boilerplate-text {
    background-color: #2C3742;
    color: white !important;
}

修改后的完整自定义CSS代码 #

.ext-sign-in-box {
    padding: 40px 30px;
    background-color: #2C3742;
    color: white;
}

.ext-title {
    color: #fff;
}

.ext-button.ext-primary {
    background-color: #f0f0f0;
    color: #000;
}

.ext-boilerplate-text {
    background-color: #2C3742;
    color: white;
}

/* 修复输入框占位符样式 */
.ext-input.ext-text-box::placeholder,
.ext-input.ext-text-box::-webkit-input-placeholder,
.ext-input.ext-text-box::-moz-placeholder,
.ext-input.ext-text-box:-ms-input-placeholder,
.ext-input.ext-text-box::-ms-input-placeholder {
    color: #6C7A8A !important;
}

.ext-has-error {
    border-color: #ff7a00 !important;
}

/* 修复身份横幅样式 */
.ext-identityBanner {
    background-color: #2C3742 !important;
}

/* 统一重置密码页面文本样式 */
body.ext-reset-password-page .boilerplate-text {
    background-color: #2C3742;
    color: white !important;
}

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