-1

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

enter image description here

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?

Jhonatan Sandoval
  • 1,283
  • 6
  • 24
  • 40

1 Answers1

0

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("");
        };
    }
})
Community
  • 1
  • 1
Patrick Geyer
  • 1,515
  • 13
  • 30
  • I've already have setted this code to a file named `custom.validation.js`. Is there any way to make a `$.css()` in this javascript file ? – Jhonatan Sandoval Apr 24 '14 at 17:55
  • Sorry, I didn't. I think it's for chrome solution, which works fine for me. The problem is in Firefox... is it correct to use `::-moz-..` ? – Jhonatan Sandoval Apr 25 '14 at 14:52
  • Unfortunaly (i think) there is not a solution for firefox. My quick way to solve this was set the text of the validate error to another too short. Anyway, thank you for answers. – Jhonatan Sandoval Apr 25 '14 at 14:56
  • @JhonatanSandoval, you're right - there's been no such implementation for Firefox, Opera and other browsers. Your solution may work, but keep an eye on future developments. Maybe it's best hide a div and only show it when the user submits a form and there's a validation error. Good luck! – Patrick Geyer Apr 25 '14 at 18:07