是否可以为浏览器默认required校验提示添加CSS样式并居中自定义提示内容？

1. 能否为浏览器默认required校验提示添加CSS样式 #

浏览器默认的表单校验气泡提示属于浏览器内置的原生UI组件，是在Shadow DOM中渲染的，没有统一的标准CSS伪类可以控制样式：

• 部分早期Chrome内核浏览器支持::-webkit-validation-bubble、::-webkit-validation-bubble-message等webkit私有伪元素修改样式，但兼容性极差，Firefox、Safari等浏览器基本不支持，且新版Chrome也逐步限制了这些伪元素的可用样式范围
• 生产环境不建议尝试修改原生提示的样式，自定义校验提示层是更稳妥的方案

2. 自定义setCustomValidity提示中OR无法居中的解决方法 #

你当前的写法无法实现OR居中，原因是setCustomValidity()方法接收的是纯文本内容，你写入的HTML标签、特殊样式标记都不会被浏览器解析，仅能识别\n实现换行效果，原生提示本身没有提供文本对齐的控制能力。

有两种可选的解决方案：

方案1：用空格手动对齐（仅适配固定场景，不推荐） #

如果坚持使用原生提示，可以通过手动计算前后空格数来近似实现居中效果，示例代码如下：

<input name="loanOfficerUrl" id="loanOfficerUrl" class="form-control" placeholder="New" type="text"
       required
       oninvalid="this.setCustomValidity('Please Enter a Loan Officer Url! \n              OR              \n Please Select a Loan Officer Url!')"
       oninput="this.setCustomValidity('')" />

注：空格数需要根据实际行长度调整，不同浏览器渲染字体不同，对齐效果可能有偏差

方案2：自定义校验提示层（推荐） #

完全替代原生校验提示，自己控制DOM结构和样式，你可以任意调整对齐方式、字体、颜色等所有样式，示例逻辑如下：

1. 阻止表单默认的invalid事件
2. 校验不通过时插入自定义的错误提示DOM
3. 可以给OR单独加类设置text-align: center实现完美居中
   示例代码参考：

<style>
.form-error {
  margin-top: 4px;
  color: #dc3545;
  font-size: 14px;
}
.or-text {
  display: block;
  text-align: center;
  margin: 4px 0;
  font-weight: bold;
}
</style>

<input name="loanOfficerUrl" id="loanOfficerUrl" class="form-control" placeholder="New" type="text" required />
<div class="form-error" id="loanOfficerError" style="display: none;"></div>

<script>
const input = document.getElementById('loanOfficerUrl')
const errorEl = document.getElementById('loanOfficerError')

input.addEventListener('invalid', (e) => {
  e.preventDefault() // 阻止原生提示弹出
  errorEl.innerHTML = `Please Enter a Loan Officer Url! <span class="or-text">OR</span> Please Select a Loan Officer Url!`
  errorEl.style.display = 'block'
})

input.addEventListener('input', () => {
  errorEl.style.display = 'none'
})
</script>

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