How do I change the image inside an HTML5 form-validation message?

Viewed 2492

Using this article, I'm changing the styling of some of my HTML5 form-validation pop-ups. However, my error pop-ups still have the default, orange exclamation point in the error, in addition to the new red X I've added. How do I get rid of the orange exclamation point (see image below). So far, I'm only testing in Chrome.

sample error message

Here is the CSS that I'm using from that 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;
}
1 Answers
Related