css - 表单中的 CSS 样式 html 弹出窗口？

Question

好吧，我已经搜索过，但没有找到任何关于此的信息，或者是否有可能。好的，所以如果我制作注册表单，我有一个这样的电子邮件字段。

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

现在很简单，但它是一个简单的 html 过滤器，用于在进入服务器端之前过滤掉其中输入的一些 bs。现在 idk 如果您以前看过它，但它是该字段的通用箭头框。看起来不是最好的，尤其是我的网站布局。有没有办法编辑这个所谓的弹出框/窗口的外观？谢谢！

Answer 1

您应该能够在 chrome 中使用以下样式：

/* 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>  */
}