aboutsummaryrefslogtreecommitdiff
path: root/less/forms.less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-02-08 16:52:22 -0800
committerMark Otto <[email protected]>2014-02-08 16:52:22 -0800
commite9199718d64dadc22d61b4cea8c77a2307455823 (patch)
treeb10f0174a9d564da40df55d658136fef74b6adb9 /less/forms.less
parent4787a69efbe0fcd81228781b3c91dfe198aa0f1b (diff)
parent7f88009394e72395aa7a458ae442b0c3037dbd15 (diff)
downloadbootstrap-e9199718d64dadc22d61b4cea8c77a2307455823.tar.xz
bootstrap-e9199718d64dadc22d61b4cea8c77a2307455823.zip
Merge branch 'master' into fix-12154
Conflicts: dist/css/bootstrap.css.map dist/css/bootstrap.min.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css
Diffstat (limited to 'less/forms.less')
-rw-r--r--less/forms.less54
1 files changed, 31 insertions, 23 deletions
diff --git a/less/forms.less b/less/forms.less
index 6b475ae13..f607b8509 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -11,6 +11,10 @@ fieldset {
padding: 0;
margin: 0;
border: 0;
+ // Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets,
+ // so we reset that to ensure it behaves more like a standard block element.
+ // See https://github.com/twbs/bootstrap/issues/12359.
+ min-width: 0;
}
legend {
@@ -33,6 +37,10 @@ label {
// Normalize form controls
+//
+// While most of our form styles require extra classes, some basic normalization
+// is required to ensure optimum display with or without those classes to better
+// address browser inconsistencies.
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
@@ -64,13 +72,6 @@ select[size] {
height: auto;
}
-// Fix optgroup Firefox bug per https://github.com/twbs/bootstrap/issues/7611
-select optgroup {
- font-size: inherit;
- font-style: inherit;
- font-family: inherit;
-}
-
// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
@@ -78,16 +79,6 @@ input[type="checkbox"]:focus {
.tab-focus();
}
-// Fix for Chrome number input
-// Setting certain font-sizes causes the `I` bar to appear on hover of the bottom increment button.
-// See https://github.com/twbs/bootstrap/issues/8350 for more.
-input[type="number"] {
- &::-webkit-outer-spin-button,
- &::-webkit-inner-spin-button {
- height: auto;
- }
-}
-
// Adjust output element
output {
display: block;
@@ -139,20 +130,19 @@ output {
.form-control-focus();
// Placeholder
- //
- // Placeholder text gets special styles because when browsers invalidate entire
- // lines if it doesn't understand a selector/
.placeholder();
// Disabled and read-only inputs
- // Note: HTML5 says that controls under a fieldset > legend:first-child won't
- // be disabled if the fieldset is disabled. Due to implementation difficulty,
- // we don't honor that edge case; we style them as disabled anyway.
+ //
+ // HTML5 says that controls under a fieldset > legend:first-child won't be
+ // disabled if the fieldset is disabled. Due to implementation difficulty, we
+ // don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
+ opacity: 1; // iOS fix for unreadable disabled content
}
// Reset height for `textarea`s
@@ -161,10 +151,24 @@ output {
}
}
+
+// Search inputs in iOS
+//
+// This overrides the extra rounded corners on search inputs in iOS so that our
+// `.form-control` class can properly style them. Note that this cannot simply
+// be added to `.form-control` as it's not specific enough. For details, see
+// https://github.com/twbs/bootstrap/issues/11586.
+
+input[type="search"] {
+ -webkit-appearance: none;
+}
+
+
// Special styles for iOS date input
//
// In Mobile Safari, date inputs require a pixel line-height that matches the
// given height of the input.
+
input[type="date"] {
line-height: @input-height-base;
}
@@ -345,6 +349,10 @@ input[type="checkbox"],
width: auto; // Prevent labels from stacking above inputs in `.form-group`
vertical-align: middle;
}
+ // Input groups need that 100% width though
+ .input-group > .form-control {
+ width: 100%;
+ }
.control-label {
margin-bottom: 0;