If you are using the new HTML5 input types like input[type="email"] and input[type="url"], you will discover their automatic validation bubbles in Chrome. Soon after spotting them, you will likely want to change their style.

The good news is, Chrome makes selectors available as discussed on StackOverflow. The bad news is, well, there isn’t really bad news, it’s just a little fiddly & undocumented at the moment.

Not all the selectors outlined on StackOverflow worked for me. I found a page on jsdo.it that replaced the top-inner-arrow and top-out-arrow selectors with just an arrow selector. This worked a treat. I also found on that page an arrow-clipper selector for styling the area behind the top arrow.

The complete set of working CSS selectors I found are:

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

Using these, I was able to improve the appearance of validation messages for an email field in the new bbBolt landing page using the following CSS.

::-webkit-validation-bubble {
	font-weight: 200;
}
::-webkit-validation-bubble-arrow {
 border: 1px solid #E6C700;
 background: #FAF1B4;
 margin-bottom:6px;
 padding: 2px;
}
::-webkit-validation-bubble-message {
 border: 1px solid #E6C700;
 background: #FAF1B4;
 padding: 0.5em 1em;
 margin-top: 3px;
}

The end result looks like this:

Chrome's Default Validation Message Bubble

Newly Styled Validation Message Bubble

Bonus Prize: Placeholder Styles

Placeholders are another cool HTML5 feature. You can style them too. To add a placeholder to an input element, include the placeholder attribute and describe the content it expects. For example:

<input type="email" name="email" placeholder="you@example.com" value="" required>

Then you can use the following selectors in Firefox & Chrome to style the placeholder (NB: Chrome doesn’t wrap placeholders in textareas by default).

:-moz-placeholder {}
::-webkit-input-placeholder {}

For example, this is a placeholder with the color property set to red (color: #FF0000).

Placeholder with Red Style