HTML5 - 如何将 CSS 应用于验证器消息

Question

我正在尝试（没有结果）对此验证器消息应用一个简单的自定义宽度：

我该怎么做？

更新：我的意思是，显示“Please select an item from the list”的消息我们可以假设它默认具有width=100px。如何将此默认宽度更改为300px？

Answer 1

这个问题已经回答了。你可以找到答案here。为了便于访问，您需要的代码如下。

::-webkit-validation-bubble

::-webkit-validation-bubble-arrow-clipper 

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message 

这是 Chrome 的样式实现，但它不是官方标准。因此，请考虑创建自己的弹出窗口。

---

设置气泡内容

请考虑添加您已经尝试过的内容以及您期望的结果。

$(document).ready(function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field shouldn't be left blank/please select an option!");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})