New issue
Advanced search Search tips
Starred by 10 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Jul 2013
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug

Sign in to add a comment

::-webkit-validation-bubble stopped working in Chrome Blink

Reported by, Jul 10 2013

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36

Steps to reproduce the problem:
1. Fill a form
2. Forget intentionally to complete a required field
3. Press the send Button

What is the expected behavior?
the css3 should give a Yellowish label(::-webkit-validation-bubble) with the alert.

What went wrong?
The label still appears but the css formatting doesn't.

Did this work before? Yes Before Blink replace Webkit

Chrome version: 28.0.1500.71  Channel: stable
OS Version: 6.2 (Windows 8)
Flash Version: Shockwave Flash 11.8 r800

You can see the bug in my site
Validation bubble - Chrome blink vs Chrome Webkit.html
626 bytes View Download

Comment 1 by, Jul 10 2013

Labels: -Cr-UI -OS-Windows Cr-Blink-Forms
Status: WontFix
The support of these non-standard pseudo elements were removed.

Comment 2 by Deleted ...@, Jul 10 2013

So, just so I understand this correctly. There will be no more ability to style elements using: 

Comment 3 by, Jul 10 2013

::-webkit-validation-bubble* were removed.

Comment 4 by Deleted ...@, Jul 10 2013

So is there any way to style the validation bubble for Chrome v28 and up using Blink? 

Comment 5 by, Jul 10 2013

> So is there any way to style the validation bubble for Chrome v28 and up using Blink? 

There are no ways.  Web authors need to build their own UI from scratch.

Comment 6 by Deleted ...@, Jul 10 2013

I would like to completely hide the validation bubble. I am building my own validation UI  using the HTML5 "required" attribute on input fields. Using the "required" attribute automatically makes it appear on submit. In CSS I have the validation bubble set to hidden, which has worked fine. Now it appears on all input fields that have required attributes or type="email", etc. 

Comment 7 by, Jul 11 2013

This is boring to death.
I thought that blink was going to be different but forward.
Never thought that there was going to a regression.
I can only hope Chrome Blink dosenĀ“t become the new IE double trouble!
Google just have to create their own prefixes or support the old ones.  

Comment 8 by, Jul 11 2013

 Issue 259113  has been merged into this issue.

Comment 9 by, Jul 11 2013

Styling the bubble to hide the bubble is not a good solution.  It doesn't work on IE10, Firefox, and Opera (Presto).  You had better do:
 - add novalidate attribute to <form>,
 - hook 'submit' event, and check HTMLFormElement::checkValidity(), and show your own UI.

We don't want to lock web authors in Google Chrome, and want to discourage them from using vendor-specific ways.

Ok, I agree to the "discourage" and I also believe in unicode for CSS3.
But the fact is that you created BLINK..... and at the moment that means more trouble to web developers.

Dude, just remove the "required" option and write some old fashion PHP.

Comment 11 by Deleted ...@, Sep 6 2013

You have to be kidding me. Really, why on earth would you decide that i can't longer style something and you have to choose the way that something is show in my web development. 

Comment 12 Deleted

Comment 13 Deleted

Comment 14 by, Sep 16 2013

It wouldn't be so much of a problem if Chrome provided some real design for validation messages. Firefox messages are ok, but default validation messages in Chrome look amateurish.

Comment 15 by, Sep 16 2013

If a web author doesn't like the validation message UI provided by a browser, I recommend to specify novalidate/formnovalidate attribute and build his/her own UI. HTML5 validation API is still available even if you add novalidate/formnovalidate.

Comment 16 by, Sep 17 2013

I'm sorry, trying to make the comment brief I failed to make my point. I know that you can write your own validation messages entirely, but then there is little sense in providing validation messages in the browser that cannot be used by the majority.

Attached you may find two screenshots of a default Bootstrap 3 template, which arguably is what most web developers will be using for new projects. The Firefox message looks OK, but the Chrome message has wrong padding and font size (I also don't like the icon choice, but that's personal preference). 

This validation message makes (by default) any website look sloppy, attributing to the web author credit for not taking proper care for details. This is not a good thing for a default L&F.
44.0 KB View Download
41.8 KB View Download

Comment 17 by, Sep 17 2013

If you think the appearance has a bug, please file new issue.

Comment 18 by, Sep 17 2013

Added new issue #293209. I apologize for my choice of words, but English is not my native tongue. I didn't mean to be rude.
I think it's unacceptable to put anything on a screen inside the browser window that cannot be styled. Furthermore, to tell us that the fix is to set novalidate on the form, well, please refer to my comment here:

I think this is a big misstep in the wrong direction.
#9 Is there a more suitable explanation for why this field cannot either be turned off or styled alternately? It's a fantastic feature, but as others have said here, the popup is problematic in terms of styling. This response is disappointing: "There are no ways [to style the popup]. Web authors need to build their own UI from scratch." I'm not sure I follow the explanation. The response also seems a little knee-jerk, based on opinion rather than what might actually be the best thing to do.
Also to clarify, by "response" I mean #9.

Comment 22 by, Jun 13 2014

#9 This is a huge disadvantage to all web developers. Why can't we at least have the ability to turn validation messages off? Why do we have to re-implement a validation system when you already have one in place, but all we want is the validation aspect and not the built in messaging? By taking away the ability to style elements that CHROME adds to the browser window, it is hurting developers professional appearance. We just want to use Chrome's WONDERFUL validation system with our own error messages. Either let us style them, or let us hide them, but don't make us re-invent the wheel just because you don't want our code to be "browser specific". Writing a new validation system just for Chrome is going to be much more "browser (chrome) specific" code than setting "::-webkit-validation-bubble, ::-webkit-validation-bubble * { display: none; }. This isn't just an annoyance, it's a huge disadvantage to any developer who wants to easily utilize Chrome's built in validation. I usually brag about how wonderful Chrome is, but I'm starting to think it's heading in another direction...
You can turn off the bubbles cross-platform with some javascript  (hacky though that may be)

    document.querySelector( "form" )
        .addEventListener( "invalid", function( event ) {
        }, true );

More information here

Comment 24 by, Oct 24 2014

I've just discovered this built-in validation. 

Really great functionality.

What a shame that I can't edit the position of the pop up in a narrow web page within an oldschool desktop app that uses embedded Chromium! 

I agree, it's a shame we can't style the bubbles. Let us use html5 functionality, don't make us adhere to a singular look and feel if we want to use it.

Comment 26 by, Jun 27 2016

I cannot agree more, what point to have a UI feature if you can't style it
I agree. I don't even want to style the validation much.

display:none will do.

I can do a much better job myself. The native validationMessage display just spoils it.
Screen Shot 2018-05-17 at 18.33.27.png
90.2 KB View Download

Sign in to add a comment