如何更改HTML5表单验证消息中的图像？ [英] How do I change the image inside an HTML5 form-validation message?

问题描述

使用

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.

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;
}

解决方案

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/

这篇关于如何更改HTML5表单验证消息中的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！