From 01dbc4cc050e0c1635c186932a60329f2214f782 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 21:24:03 -0700 Subject: Bump up from 2px to 3px so it's consistent; also fix focus of inputs --- scss/_variables.scss | 4 ++-- scss/mixins/_buttons.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index d277011b2..c17339575 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -352,7 +352,7 @@ $input-btn-line-height-lg: 1.5 !default; $btn-font-weight: $font-weight-normal !default; $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; -$btn-focus-box-shadow: 0 0 0 2px rgba($brand-primary, .25) !default; +$btn-focus-box-shadow: 0 0 0 3px rgba($brand-primary, .25) !default; $btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; $btn-primary-color: $white !default; @@ -407,7 +407,7 @@ $input-border-radius-sm: $border-radius-sm !default; $input-bg-focus: $input-bg !default; $input-border-focus: lighten($brand-primary, 25%) !default; -$input-box-shadow-focus: $input-box-shadow, rgba($input-border-focus, .6) !default; +$input-box-shadow-focus: $input-box-shadow, $btn-focus-box-shadow !default; $input-color-focus: $input-color !default; $input-color-placeholder: $gray-light !default; diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 47f2834ff..f5ca3aa71 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -22,9 +22,9 @@ &.focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5); + box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5); } @else { - box-shadow: 0 0 0 2px rgba($border, .5); + box-shadow: 0 0 0 3px rgba($border, .5); } } @@ -60,7 +60,7 @@ &:focus, &.focus { - box-shadow: 0 0 0 2px rgba($color, .5); + box-shadow: 0 0 0 3px rgba($color, .5); } &.disabled, -- cgit v1.2.3 From e1c3f79e9865510066b2442f17d53885a9b78f8e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 21:25:02 -0700 Subject: tighten up horizontal input and button padding --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index c17339575..faea8306a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -339,7 +339,7 @@ $table-inverse-color: $body-bg !default; // For each of Bootstrap's buttons, define text, background and border color. $input-btn-padding-y: .5rem !default; -$input-btn-padding-x: 1rem !default; +$input-btn-padding-x: .75rem !default; $input-btn-line-height: 1.25 !default; $input-btn-padding-y-sm: .25rem !default; -- cgit v1.2.3 From 0cb2576bf25220d35a5f4e1d33c16c2e6f3abaee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Apr 2017 21:58:26 -0700 Subject: fixes #21922: set border-radius to 0 when global radius is disabled --- scss/_custom-forms.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index d303c48d0..7ad68bb85 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -144,7 +144,11 @@ background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; - @include border-radius($custom-select-border-radius); + @if $enable-rounded { + border-radius: $custom-select-border-radius; + } @else { + border-radius: 0; + } appearance: none; &:focus { -- cgit v1.2.3 From b21b83b7ead54e6ed0ab130ba77cbcf4a42c6e24 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Apr 2017 14:51:27 -0700 Subject: fixes #22244 by providing more specific guidance on input types --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/forms.md b/docs/components/forms.md index 44cb1ed0d..53654fac2 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -16,7 +16,7 @@ Bootstrap provides several form control styles, layout options, and custom compo Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }}/content/reboot/#forms) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes. -Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `type` attribute**. +Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information). {% example html %}
-- cgit v1.2.3 From 7efe4ddee499396efc40f53d1421b61fe5da328d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 21 Apr 2017 23:30:06 -0700 Subject: Match validation mixin focus state to normal focus state --- scss/mixins/_forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 33b186a8d..9d01e6dbc 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -20,7 +20,7 @@ border-color: $color; &:focus { - @include box-shadow($input-box-shadow, 0 0 6px lighten($color, 20%)); + @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5)); } } -- cgit v1.2.3 From dc3af6711d4a47e852ca7e82086f10b265a9025d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Apr 2017 11:56:01 -0700 Subject: Change how input and select height is computed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit — Previously we weren't including the border-width on the computed height, leading to alignment issues. — New system utilizes three variables (not ideal, but straightforward) for computing these heights. One for the vertical border, one for the line-height/font-size/padding dance, and one to add those together. — Updates CSS across forms and custom forms to use new sizing. Special note here: form validation icon sizing uses the inner variables because background-image doesn't bleed into borders unless explicit background-clip. --- scss/_custom-forms.scss | 3 +-- scss/_forms.scss | 13 +++++-------- scss/_variables.scss | 14 +++++++++++--- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 97c36472a..fb1e59c57 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -133,8 +133,7 @@ .custom-select { display: inline-block; max-width: 100%; - $select-border-width: ($custom-select-border-width * 2); - height: calc(#{$input-height} + #{$select-border-width}); + height: $input-height; padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; line-height: $custom-select-line-height; color: $custom-select-color; diff --git a/scss/_forms.scss b/scss/_forms.scss index 55e8cb43a..805bd0743 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -62,8 +62,7 @@ select.form-control { &:not([size]):not([multiple]) { - $select-border-width: ($border-width * 2); - height: calc(#{$input-height} + #{$select-border-width}); + height: $input-height; } &:focus::-ms-value { @@ -161,8 +160,7 @@ select.form-control { select.form-control-sm { &:not([size]):not([multiple]) { - $select-border-width: ($border-width * 2); - height: calc(#{$input-height-sm} + #{$select-border-width}); + height: $input-height-sm; } } @@ -175,8 +173,7 @@ select.form-control-sm { select.form-control-lg { &:not([size]):not([multiple]) { - $select-border-width: ($border-width * 2); - height: calc(#{$input-height-lg} + #{$select-border-width}); + height: $input-height-lg; } } @@ -254,8 +251,8 @@ select.form-control-lg { .form-control-danger { padding-right: ($input-btn-padding-x * 3); background-repeat: no-repeat; - background-position: center right ($input-height / 4); - background-size: ($input-height / 2) ($input-height / 2); + background-position: center right ($input-height-inner / 4); + background-size: ($input-height-inner / 2) ($input-height-inner / 2); } // Form validation states diff --git a/scss/_variables.scss b/scss/_variables.scss index 3cde2bd04..d59d8fb21 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -412,9 +412,16 @@ $input-color-focus: $input-color !default; $input-color-placeholder: $gray-light !default; -$input-height: (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default; -$input-height-lg: (($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2)) !default; -$input-height-sm: (($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2)) !default; +$input-height-border: $input-btn-border-width * 2 !default; + +$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; + +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; +$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; + +$input-height-inner-lg: ($font-size-sm * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; +$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; $input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; @@ -468,6 +475,7 @@ $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3C $custom-select-padding-y: .375rem !default; $custom-select-padding-x: .75rem !default; +$custom-select-height: $input-height !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator $custom-select-line-height: $input-btn-line-height !default; $custom-select-color: $input-color !default; -- cgit v1.2.3 From ca44f5b03a9707dda74e1aa3f92a1b54de3ec6d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Apr 2017 11:56:27 -0700 Subject: Redo the small custom select vars MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit — Sizing shorthand comes last — Add height var and put it to use --- scss/_custom-forms.scss | 8 ++------ scss/_variables.scss | 3 ++- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index fb1e59c57..1d3ce2f18 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -176,14 +176,10 @@ } .custom-select-sm { + height: $custom-select-height-sm; padding-top: $custom-select-padding-y; padding-bottom: $custom-select-padding-y; - font-size: $custom-select-sm-font-size; - - // &:not([multiple]) { - // height: 26px; - // min-height: 26px; - // } + font-size: $custom-select-font-size-sm; } diff --git a/scss/_variables.scss b/scss/_variables.scss index d59d8fb21..3ab37f9f5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -492,7 +492,8 @@ $custom-select-border-radius: $border-radius !default; $custom-select-focus-border-color: lighten($brand-primary, 25%) !default; $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; -$custom-select-sm-font-size: 75% !default; +$custom-select-font-size-sm: 75% !default; +$custom-select-height-sm: $input-height-sm !default; $custom-file-height: 2.5rem !default; $custom-file-width: 14rem !default; -- cgit v1.2.3 From a11ae7facfa13c8d85615fb9bc660b7b415f8bbf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 May 2017 20:15:05 -0700 Subject: add a compact gutter option, .gutters-sm --- scss/_grid.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/scss/_grid.scss b/scss/_grid.scss index 9ab9ae02b..e15a9430f 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -42,6 +42,18 @@ padding-left: 0; } } + + // Optionally tighten the gutters between columns + .gutters-sm { + margin-right: -5px; + margin-left: -5px; + + > .col, + > [class*="col-"] { + padding-right: 5px; + padding-left: 5px; + } + } } // Columns -- cgit v1.2.3 From e0e1e849e6cda0d4af88a46f7e7e5a91f8b8498d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 May 2017 20:15:30 -0700 Subject: document more form layout options with grid, including some compact .gutters-sm examples --- docs/components/forms.md | 115 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) diff --git a/docs/components/forms.md b/docs/components/forms.md index fd87dec7a..51d9e8f90 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -271,6 +271,121 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o {% endexample %} +### Grid + +{% example html %} +
+
+
+ +
+
+ +
+
+
+{% endexample html %} + +{% example html %} +
+
+
+ +
+
+ +
+
+ +
+
+
+{% endexample html %} + +{% example html %} +
+
+
+ + +
+
+ +
+
@
+ +
+
+
+
+ +
+
+
+ +
+
+
+{% endexample %} + +{% example html %} +
+
+
+ + +
+
+ +
+
@
+ +
+
+
+
+ +
+
+
+ +
+
+
+{% endexample %} + +{% example html %} +
+
+
+ + +
+
+ +
+
@
+ +
+
+
+
+ +
+
+
+ +
+
+
+{% endexample %} + ### Inline forms Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. -- cgit v1.2.3 From 9e6644a20685d1276e569020cb930c635df9acd7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 May 2017 21:54:25 -0700 Subject: Update forms docs to add more headings and move the huge type example into a table --- docs/components/forms.md | 103 ++++++++++------------------------------------- 1 file changed, 21 insertions(+), 82 deletions(-) diff --git a/docs/components/forms.md b/docs/components/forms.md index 51d9e8f90..d71615976 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -18,6 +18,8 @@ Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl } Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information). +### Example + {% example html %}
@@ -89,6 +91,8 @@ Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for {% endexample %} +### Supported controls + Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group. @@ -167,88 +171,23 @@ Below is a complete list of the specific form controls supported by Bootstrap an ### Textual inputs -Here are examples of `.form-control` applied to each textual HTML5 `` `type`. - -{% example html %} -
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-{% endexample %} +Here are examples of `.form-control` applied to each textual HTML5 `` `type` (meaning, almost everything except the file, checkbox, and radio inputs). + +| Type | Example | +| --- | --- | +| `text` | | +| `search` | | +| `email` | | +| `url` | | +| `tel` | | +| `password` | | +| `number` | | +| `datetime-local` | | +| `date` | | +| `month` | | +| `week` | | +| `time` | | +| `color` | | ## Form layouts -- cgit v1.2.3 From f3acf9d890568e7ecaab0c4218f51f4afb7489d7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 May 2017 21:54:35 -0700 Subject: custom forms example with new grid styles --- docs/components/forms.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/docs/components/forms.md b/docs/components/forms.md index d71615976..feadf19bc 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -325,6 +325,32 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o {% endexample %} +{% example html %} +
+
+
+ + +
+
+ +
+
+ +
+
+ +{% endexample %} + ### Inline forms Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. -- cgit v1.2.3 From 8a6642bbff3b86a24fc47cad42f5a23af80f057a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 May 2017 14:38:37 -0700 Subject: rename section --- docs/components/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/components/forms.md b/docs/components/forms.md index feadf19bc..32b937172 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -189,7 +189,7 @@ Here are examples of `.form-control` applied to each textual HTML5 `` `ty | `time` | | | `color` | | -## Form layouts +## Layout Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis. -- cgit v1.2.3 From 4a554e5ff5fd8a2e82cfbea3f301049c0de48d2a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 1 Jun 2017 08:06:17 -0700 Subject: trying out new validation styles --- docs/4.0/components/forms.md | 28 +++++++++++++++++++++++++++ scss/_forms.scss | 20 ++++++++++++++++--- scss/mixins/_forms.scss | 46 ++++++++++++++++++++++++++++++++------------ 3 files changed, 79 insertions(+), 15 deletions(-) diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 8fe2a9d26..6c3272dc1 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -897,6 +897,34 @@ Those same states can also be used with horizontal forms. {% endexample %} +### Validate with grid + +And in more complex grids. + +{% example html %} +
+
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ + Example help text that remains unchanged. +
+ +
+{% endexample %} + Checkboxes and radios are also supported. {% example html %} diff --git a/scss/_forms.scss b/scss/_forms.scss index 805bd0743..391a6cb4f 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -255,11 +255,21 @@ select.form-control-lg { background-size: ($input-height-inner / 2) ($input-height-inner / 2); } +.form-control-validated, +.is-validated { + padding-right: ($input-btn-padding-x * 3); + background-repeat: no-repeat; + background-position: center right ($input-height-inner / 4); + background-size: ($input-height-inner / 2) ($input-height-inner / 2); +} + // Form validation states .has-success { @include form-control-validation($brand-success); - .form-control-success { + .form-control-success, + .form-control-validated, + .is-validated { background-image: $form-icon-success; } } @@ -267,7 +277,9 @@ select.form-control-lg { .has-warning { @include form-control-validation($brand-warning); - .form-control-warning { + .form-control-warning, + .form-control-validated, + .is-validated { background-image: $form-icon-warning; } } @@ -275,7 +287,9 @@ select.form-control-lg { .has-danger { @include form-control-validation($brand-danger); - .form-control-danger { + .form-control-danger, + .form-control-validated, + .is-validated { background-image: $form-icon-danger; } } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 16f0080f2..38251332a 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -14,22 +14,44 @@ } // Set the border and box shadow on specific inputs to match - .form-control, - .custom-select, - .custom-file-control { - border-color: $color; + // .form-control-validated, + // .is-validated, + // .custom-select, + // .custom-file-control { + // border-color: $color; + // + // &:focus { + // @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5)); + // } + // } - &:focus { - @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5)); + .is-validated { + // Textual inputs + &.form-control, + &.custom-select, + &.custom-file-control { + border-color: $color; + + &:focus { + @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5)); + } } - } - // Set validation states also for addons - .input-group-addon { - color: $color; - background-color: lighten($color, 40%); - border-color: $color; + &.input-group { + .input-group-addon { + color: $color; + background-color: lighten($color, 40%); + border-color: $color; + } + } } + + // // Set validation states also for addons + // .input-group-addon { + // color: $color; + // background-color: lighten($color, 40%); + // border-color: $color; + // } } // Form control focus state -- cgit v1.2.3 From af097bd5bf18a12e6bfb4f8ee59459517062a379 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Jun 2017 20:21:08 -0700 Subject: start rewriting --- docs/4.0/components/forms.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 6c3272dc1..3fc7bfddc 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -809,11 +809,19 @@ Inline text can use any typical inline HTML element (be it a ``, `` ## Validation -Bootstrap includes validation styles for danger, warning, and success states on most form controls. +Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](http://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript. + +**We highly recommend using custom validation messages as native browser validation is not announced to most assistive technologies like screenreaders.** ### How it works -Here's a rundown of how they work: +Here's a rundown of how form validation works: + +- HTML form validation includes support for two CSS pseudo-classes, `:invalid` and `:valid`, for use on ``s. +- All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls. +- You may choose to rely on the browser default validation feedback, or implement custom feedback styles with HTML and CSS. +- You may provide custom validity messages with `setCustomValidity` in JavaScript. + - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.col-form-label`, `.form-control`, or custom form element will receive the validation styles. - Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state. -- cgit v1.2.3 From d2c9f3f00a385a6509589a3b102d1f8ecda84631 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Jun 2017 23:00:14 -0700 Subject: flesh out invalid styles on .was-validated --- docs/4.0/components/forms.md | 135 ++++++++++++++++++++++++++++++++++++++++++- scss/_forms.scss | 82 ++++++++++++++++++++++++++ 2 files changed, 215 insertions(+), 2 deletions(-) diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 3fc7bfddc..b66921955 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -817,11 +817,142 @@ Provide valuable, actionable feedback to your users with HTML5 form validation Here's a rundown of how form validation works: -- HTML form validation includes support for two CSS pseudo-classes, `:invalid` and `:valid`, for use on ``s. +- HTML form validation includes support for two CSS pseudo-classes, `:invalid` and `:valid`, on ``, ` + + + +{% endexample %} + +For file inputs, swap the `.form-control` for `.form-control-file`. + +{% example html %} +
- - - This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. + +
-
- Radio buttons -
- -
-
- + +{% endexample %} + +### Sizing + +Set heights using classes like `.form-control-lg` and `.form-control-sm`. + +{% example html %} + + + +{% endexample %} + +{% example html %} + + + +{% endexample %} + +### Readonly + +Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. + +{% example html %} + +{% endexample %} + +### Static + +If you want to have read-only fields in your form styled as plain text, use the `.form-control-static` class to remove the default form field styling and preserve the correct margin and padding. + +{% example html %} +
+
+ +
+
-
- +
+
+ +
+
-
-
-
- {% endexample %} -### Supported controls - -Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group. - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassesUsed forSupported variations
- {% markdown %}`.form-group`{% endmarkdown %} - - Any group of form controls - - {% markdown %}Use with any block-level element like `
` or `
`{% endmarkdown %} -
- {% markdown %}`.form-control`{% endmarkdown %} - - Textual inputs - - {% markdown %}`text`, `password`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`{% endmarkdown %} -
- Select menus - - {% markdown %}`multiple`, `size`{% endmarkdown %} -
- Textareas - - N/A -
- {% markdown %}`.form-control-file`{% endmarkdown %} - - File inputs - - {% markdown %}`file`{% endmarkdown %} -
-{% markdown %} -`.form-check` -{% endmarkdown %} - - Checkboxes and radios - - N/A -
- -Here are examples of `.form-control` applied to each textual HTML5 `` `type` (meaning, almost everything except the file, checkbox, and radio inputs). - -| Type | Example | -| --- | --- | -| `text` | | -| `search` | | -| `email` | | -| `url` | | -| `tel` | | -| `password` | | -| `number` | | -| `datetime-local` | | -| `date` | | -| `month` | | -| `week` | | -| `time` | | -| `color` | | +{% example html %} +
+
+ + +
+
+ + +
+ +
+{% endexample %} + +## Checkboxes and radios + +Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. + +Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `