CSS style html popup in form?

Question

Well I have searched and haven't found any information on this or whether it's even possible. Ok so if I make a registration form I have an email field such as this.

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

Now easy stuff, but it's a simple html filter to filter out some bs entered in there before it goes server side. Now idk if you have seen it before but it's a generic arrowed box by the field. Doesn't look the greatest especially with my site layout. Is there any way to edit the look of this so called popup box/window? Thanks!

I tried it in Chrome and FF, but couldn't find your "arrow". What browser do you use? — Krycke, Sep 01 '12 at 23:25
I use chrome, if you use the email field it will check for basic necessities such as the @ and I believe an extension. If none of that is found a little box pops up. And that's what I want to style. — NardCake, Sep 01 '12 at 23:28
If you're speaking of styling a standard select then see http://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box — jtheman, Sep 01 '12 at 23:29
Ah, you meant the error validation popup, sorry, misunderstood the question. — Krycke, Sep 01 '12 at 23:30

score 2 · Accepted Answer · edited May 23 '17 at 10:24

You should be able to use the following styles in 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{}

It's referenced on this StackOverflow question.

Here's the default style:

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

Right now it's not possible to do in Firefox. You can only change the message in FF. — Krycke, Sep 02 '12 at 00:13
Oh ok, and is there a way to change the text? And other than that thanks alot! — NardCake, Sep 02 '12 at 00:27
Yeah you can use `x-moz-errormessage`: https://developer.mozilla.org/en-US/docs/HTML/Element/Input#Error_messages — Krycke, Sep 02 '12 at 00:31

CSS style html popup in form?

1 Answers1