窗體中的CSS樣式html彈出窗口？

Question

那麼我已經搜索過，沒有找到任何有關這方面的信息，或者甚至是可能的。好的，如果我製作註冊表格，我有這樣的電子郵件字段。

<input type="email" id="email"/> 

現在簡單的東西，但它是一個簡單的HTML過濾器來過濾掉一些BS進入了就這樣吧服務器端之前。現在，如果你以前看過它，但它是一個通用的箭頭框。特別是我的網站佈局看起來不是最棒的。有沒有辦法編輯這個所謂的彈出框/窗口的外觀？ 謝謝！

Answer 1

您應該能夠使用以下樣式的鍍鉻：

/* The entire area of the popup including area outside the bubble shape */ 
::-webkit-validation-bubble{} 
/* Portion above the bubble behind top arrow */ 
::-webkit-validation-bubble-arrow-clipper{} 
/* The arrow at the top of the bubble */ 
::-webkit-validation-bubble-arrow{} 
/* The area containing the validation message */ 
::-webkit-validation-bubble-message{} 

它在這個StackOverflow question引用。

這裏的默認樣式：

/* form validation message bubble */ 

::-webkit-validation-bubble { 
    display: block; 
    z-index: 2147483647; 
    position: absolute; 
    opacity: 0.9; 
    line-height: 0; 
    -webkit-text-security: none; 
    -webkit-transition: opacity 05.5s ease; 
} 

::-webkit-validation-bubble-message { 
    display: block; 
    font: message-box; 
    min-width: 50px; 
    max-width: 200px; 
    border: solid 2px black; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fbf9f9), to(#f0e4e4)); 
    padding: 8px; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: 4px 4px 4px rgba(204,204,204,0.7); 
    line-height: normal; 
} 

::-webkit-validation-bubble-top-outer-arrow { 
    display: inline-block; 
    position: relative; 
    left: 14px; 
    height: 0; 
    width: 0; 
    border-style: solid; 
    border-width: 14px; 
    border-bottom-color: black; 
    border-right-color: transparent; 
    border-top-width: 0; 
    border-left-width: 0; 
} 

::-webkit-validation-bubble-top-inner-arrow { 
    display: inline-block; 
    height: 0; 
    width: 0; 
    border-style: solid; 
    border-width: 10px; /* <border box width of outer-arrow> - <message border width> * 2 */ 
    border-bottom-color: #fbf9f9; 
    border-right-color: transparent; 
    border-top-width: 0; 
    border-left-width: 0; 
    position: relative; 
    top: 2px; /* <message border width> */ 
    left: 2px; /* <outer-arrow position> + <message border width> - <border box width of outer-arrow> */ 
}