diff --git a/scss/_forms.scss b/scss/_forms.scss index dc2ad9b4a5d440e3a975b0e3154ac3912ebe2c9f..0d22c15f07716b98b63341544dd5580660ed98d4 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -118,38 +118,6 @@ select.form-control { } -// Todo: clear this up - -// Special styles for iOS temporal inputs -// -// In Mobile Safari, setting `display: block` on temporal inputs causes the -// text within the input to become vertically misaligned. As a workaround, we -// set a pixel line-height that matches the given height of the input, but only -// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 -// -// Note that as of 8.3, iOS doesn't support `week`. - -_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/ -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { - &.form-control { - line-height: $input-height; - } - - &.input-sm, - .input-group-sm &.form-control { - line-height: $input-height-sm; - } - - &.input-lg, - .input-group-lg &.form-control { - line-height: $input-height-lg; - } -} - - // Static form control text // // Apply class to an element to make any string of text align with labels in a diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 4906cb470a169cae8b2899213c36ed3ab8dbcb31..1eade0272590455151175b157cbef5c06a27eecf 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -317,6 +317,18 @@ textarea { border-radius: 0; } +input[type="date"], +input[type="time"], +input[type="datetime-local"], +input[type="month"] { + // Remove the default appearance of temporal inputs to avoid a Mobile Safari + // bug where setting a custom line-height prevents text from being vertically + // centered within the input. + // + // Bug report: https://github.com/twbs/bootstrap/issues/11266 + -webkit-appearance: listbox; +} + textarea { // Textareas should really only resize vertically so they don't break their (horizontal) containers. resize: vertical;