Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.
Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.
<form class="form-inline"> <input type="text" class="span3" placeholder="Email"> <input type="password" class="span3" placeholder="Password"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> <button type="submit" class="btn">Sign in</button> </form>diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 8dda0cb204..4be10716ca 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -825,16 +825,18 @@
{{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}
{{_i}}Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.{{/i}}
<form class="form-inline">
<input type="text" class="span3" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="span3" placeholder="{{_i}}Password{{/i}}">
- <label class="checkbox">
- <input type="checkbox"> {{_i}}Remember me{{/i}}
- </label>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox"> {{_i}}Remember me{{/i}}
+ </label>
+ </div>
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form>
diff --git a/less/forms.less b/less/forms.less
index 383f105fc6..5115f0c23d 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -3,10 +3,9 @@
// --------------------------------------------------
-// General styles
+// Non-controls
// -------------------------
-
form {
margin: 0 0 @baseLineHeight;
}
@@ -30,8 +29,9 @@ legend {
}
label {
- display: block;
+ display: inline-block;
margin-bottom: 5px;
+ font-weight: bold;
}
// Form controls
@@ -65,7 +65,10 @@ input[type="color"],
color: @gray;
vertical-align: middle;
background-color: @inputBackground;
+ border: 1px solid @inputBorder;
border-radius: @inputBorderRadius;
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+ .transition(~"border linear .2s, box-shadow linear .2s");
}
// Reset appearance properties for textual inputs and textarea
@@ -77,6 +80,17 @@ textarea,
width: 100%;
}
+// Reset width of input images, buttons, radios, checkboxes
+input[type="file"],
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+ width: auto; // Override of generic input selector
+}
+
// Reset height since textareas have rows
textarea {
height: auto;
@@ -99,10 +113,6 @@ input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
- border: 1px solid @inputBorder;
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
- .transition(~"border linear .2s, box-shadow linear .2s");
-
// Focus state
&:focus {
border-color: rgba(82,168,236,.8);
@@ -120,17 +130,6 @@ input[type="checkbox"] {
line-height: normal;
}
-// Reset width of input images, buttons, radios, checkboxes
-input[type="file"],
-input[type="image"],
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-input[type="radio"],
-input[type="checkbox"] {
- width: auto; // Override of generic input selector
-}
-
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
@@ -201,9 +200,14 @@ textarea {
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
+ display: block;
min-height: @baseLineHeight; // clear the floating input if there is no label text
padding-left: 20px;
}
+.radio label,
+.checkbox label {
+ font-weight: normal;
+}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
@@ -401,7 +405,7 @@ select:focus:invalid {
.help-block,
.help-inline {
- color: lighten(@textColor, 15%); // lighten the text some for contrast
+ color: lighten(@textColor, 25%); // lighten the text some for contrast
}
.help-block {
@@ -618,9 +622,12 @@ input.search-query {
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
+ display: inline-block;
padding-left: 0;
- margin-bottom: 0;
- vertical-align: middle;
+ label {
+ margin-bottom: 0;
+ vertical-align: middle;
+ }
}
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"],
diff --git a/less/tests/forms.html b/less/tests/forms.html
index a63d728a00..ea85411c96 100644
--- a/less/tests/forms.html
+++ b/less/tests/forms.html
@@ -173,6 +173,26 @@
+
+
+