CSS样式的html弹出式表单？

嗯，我已经搜索过了，但没有找到任何关于这方面的信息，也没有找到是否可能的信息。好的，如果我做了一个登记表，我有一个像这样的电子邮件字段

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

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

---

谢谢

您应该能够在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{}

它是在这上面引用的

以下是默认样式：

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

/*表单验证消息气泡*/
：-webkit验证气泡{
显示：块；
z指数：2147483647；
位置：绝对位置；
不透明度：0.9；
线高：0；
-webkit文本安全性：无；
-webkit过渡：不透明度05.5s；
}
：-webkit验证气泡消息{
显示：块；
字体：消息框；
最小宽度：50px；
最大宽度：200px；
边框：纯色2px黑色；
背景：-webkit渐变（线性、左上、左下、从（#fbf9f9）到（#f0e4e4））；
填充：8px；
-webkit边界半径：8px；
-webkit盒阴影：4×4×4×rgba（204204,0.7）；
线高：正常；
}
：-webkit验证气泡顶部外部箭头{
显示：内联块；
位置：相对位置；
左：14px；
身高：0；
宽度：0；
边框样式：实心；
边框宽度：14px；
边框底色：黑色；
右边框颜色：透明；
边框顶部宽度：0；
边框左宽度：0；
}
：-webkit验证气泡顶部内箭头{
显示：内联块；
身高：0；
宽度：0；
边框样式：实心；
边框宽度：10px；/*-*2*/
边框底色：#fbf9f9；
右边框颜色：透明；
边框顶部宽度：0；
边框左宽度：0；
位置：相对位置；
顶部：2px；/**/
左：2px；/*+-*/
}

“电子邮件”不是一种输入类型…@jtheman:它在HTML5中。你说的是选择框吗？@Krycke然后我学到了一些东西，thanxI在Chrome和FF中尝试过，但找不到你的“箭头”。你使用什么浏览器？没问题：）很高兴能为你服务。现在在Firefox中是不可能的。您只能在FF中更改消息。哦，好的，有办法更改文本吗？除此之外，非常感谢！是的，您可以使用

x-moz-errormessage

：