如何更改HTML5表單驗證郵件中的圖像？

使用this article，我改變了我的一些HTML5表單驗證彈出窗口的樣式。但是，除了我添加的新紅色X外，我的錯誤彈出窗口仍然有錯誤中的默認橙色感嘆號。我如何擺脫橙色感嘆號（請參閱下圖）。到目前爲止，我只在Chrome中進行測試。如何更改HTML5表單驗證郵件中的圖像？

sample error message

這裏是我那篇文章使用CSS：

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

來源

2012-07-30 WEFX

您使用的是Chrome嗎？ – Adam 2012-07-30 18:58:50

請顯示您使用的代碼。 – Adam 2012-07-30 18:59:32

請參閱修改。謝謝 – WEFX 2012-07-30 19:03:21

嘗試：

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

或者，當然：

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

的jsfiddle這裏：http://jsfiddle.net/xhqhV/

來源

2012-08-01 23:22:59 achairapart

謝謝！出於好奇，我可以在哪裏找到提到這個webkit-validation-bubble-icon的文檔？我只能找到關於webkit-validation-message和webkit-validation-message-arrow的信息。 – WEFX 2012-08-02 01:26:14

我在這篇文章中發現了它：http：//www.useragentman.com/blog/2012/05/17/cross-browser-styling-of-html5-forms-even-in-older-browsers/它似乎在那裏沒有官方文檔，你只需要進入webkit源代碼即可。另外，請注意，這些選擇器將來可能會再次發生變化。 – achairapart 2012-08-02 14:05:24

這是關於這個答案的重要更新。 https://code.google.com/p/chromium/issues/detail?id=293209 簡而言之 - Chrome已停止支持此功能。 – 2014-02-17 18:05:37

如何更改HTML5表單驗證郵件中的圖像？

回答

相關問題