Come cambio l'immagine all'interno di un messaggio di convalida del modulo HTML5?

Question

Utilizzo di this article, sto modificando lo stile di alcuni dei miei popup di convalida di form HTML5. Tuttavia, i miei popup di errore hanno ancora il punto esclamativo arancione predefinito nell'errore, oltre alla nuova X rossa che ho aggiunto. Come faccio a sbarazzarmi del punto esclamativo arancione (vedi immagine sotto). Finora, sto solo testando su Chrome.

Ecco il CSS che sto usando da tale articolo:

::-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

Prova:

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

o, naturalmente:

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

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