HTML5 - How to aply CSS to validator message

Question

I'm trying (with no results) to aply a simple custom width to this validator message:

How can i do it ?

UPDATE: I mean, the message which says "Please select an item from the list" we can supose it has, by default, a width=100px . How can i change this default width to 300px?

Answer 1

This question has already been answered. You can find the answer here. For ease of access the code you'll need is below.

::-webkit-validation-bubble

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

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message 

This is Chrome's implementation of styling, however it is not officially standard. Hence consider creating your own popup.

---

Setting content of bubble

Please consider adding what you have already attempted and what results you would expect.

$(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("");
        };
    }
})