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:
parent
0a3722112c
commit
e440ff4b3f
@ -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;
|
||||||
}
|
}
|
||||||
|
14
css.html
14
css.html
@ -1772,12 +1772,26 @@ For example, <code><section></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>
|
||||||
|
9
dist/css/bootstrap.css
vendored
9
dist/css/bootstrap.css
vendored
@ -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;
|
||||||
|
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user