How to change image inside HTML5 form validation message?

Question

Using this article , I am changing the style of some of my HTML5 form popup windows. However, my error pop-ups still have an orange default exclamation mark, in addition to the new red X I added. How to get rid of an orange exclamation mark (see Image below). So far, I'm only testing in Chrome.

Here is the CSS that I use from this article:

::-webkit-validation-bubble-message { color: #eee; background: #000; border-color: #444; -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.5); } ::-webkit-validation-bubble-message:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 4px; background: url(/myPath/myImage.png) } ::-webkit-validation-bubble-arrow { background: #000; border-color: #444; -webkit-box-shadow: 0 0 0 0; } 

Answer 1

Try:

 input::-webkit-validation-bubble-icon { display: none; } 

or of course:

 input::-webkit-validation-bubble-icon { background: url(http://google.com/favicon.ico); } 

Jsfiddle here: http://jsfiddle.net/xhqhV/