0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-19 11:52:21 +01:00

<input> and <select> sizing update

Restores `font-size` and more to the `<select>` element while also
changing from `min-height` to `height` for input sizing.

Fixes #8520 as opened by @ShaunR (would've merged that PR but I moved
everything around right before).
This commit is contained in:
Mark Otto 2013-07-18 19:53:32 -07:00
parent 0a3722112c
commit e440ff4b3f
5 changed files with 25 additions and 9 deletions

View File

@ -394,6 +394,7 @@ body {
.bs-example.form-inline input[type="password"] { .bs-example.form-inline input[type="password"] {
width: 180px; width: 180px;
} }
.bs-example-control-sizing select,
.bs-example-control-sizing input[type="text"] + input[type="text"] { .bs-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: 10px; margin-top: 10px;
} }

View File

@ -1772,12 +1772,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input class="input-large" type="text" placeholder=".input-large"> <input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input"> <input type="text" placeholder="Default input">
<input class="input-small" type="text" placeholder=".input-small"> <input class="input-small" type="text" placeholder=".input-small">
<select class="input-large">
<option value="">.input-large</option>
</select>
<select>
<option value="">Default select</option>
</select>
<select class="input-small">
<option value="">.input-small</option>
</select>
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<input class="input-large" type="text" placeholder=".input-large"> <input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input"> <input type="text" placeholder="Default input">
<input class="input-small" type="text" placeholder=".input-small"> <input class="input-small" type="text" placeholder=".input-small">
<select class="input-large">...</select>
<select>...</select>
<select class="input-small">...</select>
{% endhighlight %} {% endhighlight %}
<h4>Column sizing</h4> <h4>Column sizing</h4>

View File

@ -1342,7 +1342,7 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"] { input[type="color"] {
display: block; display: block;
min-height: 38px; height: 38px;
padding: 8px 12px; padding: 8px 12px;
font-size: 14px; font-size: 14px;
line-height: 1.428571429; line-height: 1.428571429;
@ -1466,7 +1466,6 @@ input[type="checkbox"] {
line-height: normal; line-height: normal;
} }
select,
input[type="file"] { input[type="file"] {
height: 38px; height: 38px;
/* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */ /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
@ -1573,6 +1572,7 @@ textarea::-webkit-input-placeholder {
margin-left: 10px; margin-left: 10px;
} }
select.input-large,
textarea.input-large, textarea.input-large,
input[type="text"].input-large, input[type="text"].input-large,
input[type="password"].input-large, input[type="password"].input-large,
@ -1588,12 +1588,13 @@ input[type="url"].input-large,
input[type="search"].input-large, input[type="search"].input-large,
input[type="tel"].input-large, input[type="tel"].input-large,
input[type="color"].input-large { input[type="color"].input-large {
min-height: 56px; height: 56px;
padding: 14px 16px; padding: 14px 16px;
font-size: 18px; font-size: 18px;
border-radius: 6px; border-radius: 6px;
} }
select.input-small,
textarea.input-small, textarea.input-small,
input[type="text"].input-small, input[type="text"].input-small,
input[type="password"].input-small, input[type="password"].input-small,
@ -1609,7 +1610,7 @@ input[type="url"].input-small,
input[type="search"].input-small, input[type="search"].input-small,
input[type="tel"].input-small, input[type="tel"].input-small,
input[type="color"].input-small { input[type="color"].input-small {
min-height: 30px; height: 30px;
padding: 5px 10px; padding: 5px 10px;
font-size: 12px; font-size: 12px;
border-radius: 3px; border-radius: 3px;

File diff suppressed because one or more lines are too long

View File

@ -55,7 +55,7 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"] { input[type="color"] {
display: block; display: block;
min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal; padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
@ -123,7 +123,6 @@ input[type="checkbox"] {
} }
// Set the height of select and file controls to match text inputs // Set the height of select and file controls to match text inputs
select,
input[type="file"] { input[type="file"] {
height: @input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */ height: @input-height-base; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
line-height: @input-height-base; line-height: @input-height-base;
@ -231,6 +230,7 @@ textarea {
// INPUT SIZES // INPUT SIZES
// ----------- // -----------
select,
textarea, textarea,
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
@ -247,13 +247,13 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"] { input[type="color"] {
&.input-large { &.input-large {
min-height: @input-height-large; height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal; padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large; font-size: @font-size-large;
border-radius: @border-radius-large; border-radius: @border-radius-large;
} }
&.input-small { &.input-small {
min-height: @input-height-small; height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal; padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small; font-size: @font-size-small;
border-radius: @border-radius-small; border-radius: @border-radius-small;