HTML5 forms widgets are broken by the forms component

[toutpt]

I'm currently work with a plain foundation styles and HTML5 widgets (input type="date" , datetime, ...)
On Google Chrome the calendar can't be displayed on date input. The arrow down is not displayed. Inspect the CSS and remove the display: block fixe the problem.

Corresponding CSS:
https://github.com/zurb/foundation/blob/master/scss/foundation/components/_forms.scss#L302
https://github.com/zurb/foundation/blob/master/scss/foundation/components/_forms.scss#L80

I believe here you are trying to make kind of polyfill but not the good way. You should let HTML5 stuff exists the way it is and let integrators choose how they will fix not capable browser.

[dboskovic]

The easy fix is to add the following to your CSS.

input[type=date], input[type=datetime] {
    display: -webkit-flex;
}

The issue is actually caused by a bug in the webkit rendering engine for HTML5 form components. Since it relies on the flex behavior, when you set display:block on the input, it breaks down.

There's also a weird issue with the default styling of input::-webkit-inner-spin-button being display:block which shouldn't be the case in any situation. I'm sure webkit will fix this issue eventually, but for now you can also add this to your css.

input::-webkit-inner-spin-button {
    display: inline-block;
}

I'm working on implementing complete cross-browser support into the custom forms library that makes the styling for all this more beautiful and solves these issues, until then, these fixes should help you. :)

The way these date elements are constructed is as follows

• input[type=date]
  • input::-webkit-datetime-edit
    • input::-webkit-datetime-edit-fields-wrapper
      • input::-webkit-datetime-edit-day-field
      • input::-webkit-datetime-edit-text (contains /)
      • input::-webkit-datetime-edit-month-field
      • input::-webkit-datetime-edit-text (contains /)
      • input::-webkit-datetime-edit-year-field
  • input::-webkit-inner-spin-button
  • input::-webkit-calendar-picker-indicator

In case you want to do some more custom styling. Here's all the default CSS for webkit rendering of the date components.

input[type="date"] {
    -webkit-align-items: center;
    display: -webkit-inline-flex;
    font-family: monospace;
    overflow: hidden;
    padding: 0;
    -webkit-padding-start: 1px;
}

input::-webkit-datetime-edit {
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
}
input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

/* If you update padding, border, or margin in the following ruleset, update
   DateTimeFieldElement::maximumWidth too. */
input::-webkit-datetime-edit-ampm-field,
input::-webkit-datetime-edit-day-field,
input::-webkit-datetime-edit-hour-field,
input::-webkit-datetime-edit-millisecond-field,
input::-webkit-datetime-edit-minute-field,
input::-webkit-datetime-edit-month-field,
input::-webkit-datetime-edit-second-field,
input::-webkit-datetime-edit-week-field,
input::-webkit-datetime-edit-year-field {
    -webkit-user-modify: read-only !important;
    border: none;`
    display: inline;
    font: inherit !important;
    padding: 1px;
}

/* Remove focus ring from fields and use highlight color */
input::-webkit-datetime-edit-ampm-field:focus,
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-hour-field:focus,
input::-webkit-datetime-edit-millisecond-field:focus,
input::-webkit-datetime-edit-minute-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-second-field:focus,
input::-webkit-datetime-edit-week-field:focus,
input::-webkit-datetime-edit-year-field:focus {
    background-color: highlight;
    color: highlighttext;
    outline: none;
}

input::-webkit-datetime-edit-year-field[disabled],
input::-webkit-datetime-edit-month-field[disabled],
input::-webkit-datetime-edit-week-field[disabled],
input::-webkit-datetime-edit-day-field[disabled],
input::-webkit-datetime-edit-ampm-field[disabled],
input::-webkit-datetime-edit-hour-field[disabled],
input::-webkit-datetime-edit-millisecond-field[disabled],
input::-webkit-datetime-edit-minute-field[disabled],
input::-webkit-datetime-edit-second-field[disabled] {
    color: GrayText;
}

/* If you update padding, border, or margin in the following ruleset, update
   DateTimeEditElement::customStyelForRenderer too. */
input::-webkit-datetime-edit-text {
    -webkit-user-modify: read-only !important;
    display: inline;
    font: inherit !important;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="datetime"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="week"]::-webkit-inner-spin-button {
    display: inline-block;
    position: static;
    -webkit-margin-start: 2px;
}

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: block;
    position: relative;
    cursor: default;
    /* This height property is ignored for input type "number" and others which
     * use RenderTextControlSingleLine as renderer which sets height of spin
     * button in layout(). */
    height: 1.5em;
    vertical-align: top;
    -webkit-flex: none;
    -webkit-user-select: none;
    -webkit-user-modify: read-only !important;
}
input::-webkit-calendar-picker-indicator {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    padding: 0.17em 0.34em;
    -webkit-user-modify: read-only !important;
}

input::-webkit-calendar-picker-indicator:hover {
    background-color: #eee;
}

Have fun exploring the world of sickly cross browser HTML5 form support. :P

[toutpt]

Thanks a lot for that fix. I have used:

/* https://github.com/zurb/foundation/issues/1877 */
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=week],
input[type=time],
input[type=month]
{
    display: -webkit-flex;
}
input::-webkit-inner-spin-button {
    display: inline-block;
}
/* /bug fix */

The best before closing that bug should to link to the webkit bugtracker the corresponding bug. I have try to find it but fails.

The most relevant bug I have found in webkit issue tracker is with inline-block: https://bugs.webkit.org/show_bug.cgi?id=110974