HTML 5 required message being cropped

I am currently migrating a site to HTML 5 and taking advantage of the new input types and attributes - using JavaScript as a fallback when a type or attribute is not implemented. My issue is that when the required message is triggered in FireFox the message is being cropped due to it overlapping the boundary of the containing div as below:

Demo: http://jsfiddle.net/f8b7D/2/

Is there a way to trigger the display of the message to shift to use the space available further left where it would not be cropped? I kno开发者_如何学Cw that the message box cannot be selected using CSS and I would prefer not to rely on a JS solution as we have a number of users who have JavaScript disabled.

Additional Info:

In Chrome the default message for a select element overlaps the message bubble, although it is fully visible.

In Opera it displays correctly.

IE doesn't support the required attribute.

Fixed in Firefox 29 - apparently due to some dead code from 2002 that was removed once someone called their attention to it. https://bugzilla.mozilla.org/show_bug.cgi?id=647813

I'm afraid that there is no way (and perhaps never will be a way) to style the message bubble for HTML5. I'm afraid that Javascript is your best bet. Here's some context.

HTML5 Required input styling

After some further playing around I found that the width of the message box is the same as the width of the select element. By setting the min-width of the select to the width of the message box (230px) the cropping can be prevented.

select{min-width: 230px;}

This solution is definitely a hack and should only be used if your site style will not be ruined by wide select elements. If you only have options with short text values e.g. Yes, No, Maybe then the required width of the select may look peculiar so only use this solution with care.

Unfortunately this does nothing about the appearance in Chrome.

I found a solution of sorts to this clipping of html5 form error messages. Its caused by a width being used in our css for a select element. If you increase the width the popup error message also increases in width. This also only seems to affect Firefox.

So I wrapped the 'select' in a span and gave that a position relative. I then gave the select a wider width (to accommodate the error message), but then also gave it a negative left margin. You'll need to play with your own px widths for your situation, but this solved the issue. I avoided having a default value for the first 'option' but I'm guessing you can use text-align right on the 'option' elements.

This solution then creates another issue! The red outline which Firefox uses for its invalid states will outline the entire 'hidden' area of the select which looks odd and different to other elements, so the answer was to simply turn off the borders, but I used css for the valid and invalid states to simply add a background icon (check/cross) to indicate when form fields were valid/invalid. I also used x:-moz-any-link in my css to filter these styles only for firefox and no other browsers. Heres my css...

/* start styles for Firefox clipping of validation msgs */
form fieldset > span, x:-moz-any-link {position: relative; }
form select, x:-moz-any-link {width: 230px; margin-left: -82px; }
form select option, x:-moz-any-link {width: 220px; margin-right: -20px; text-align: center; }
form input, form select, x:-moz-any-link {border: solid 1px transparent; box-shadow: none; }
form input:-moz-placeholder, form select:-moz-placeholder, x:-moz-any-link {box-shadow: none !important; }
form input:invalid, form select:invalid, x:-moz-any-link {box-shadow:0 0 3px transparent; }
 /* end styles for Firefox clipping of validation msgs */

input:valid {background: #fff url("forms-check.png") no-repeat 130px center; }
input:focus:invalid {background: #fff url("forms-cancel.png") no-repeat 130px center; }

Its all a lot easier than I've made it sound?! Hope its useful.