rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Fixes #8159: Be more specific about disabled inputs to avoid iOS bug

Browse Source 
Attached disabled styles to the exact input types rather than all
inputs and reseting the checkbox/radios. If setting `background-color:
transparent;`, iOS renders no background on the disabled control.
This commit is contained in:
Mark Otto 2013-06-20 17:02:10 -07:00
parent 90d4343f66
commit 82f9de9459
2 changed files with 63 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
docs/assets/css/bootstrap.css vendored
View File

@ -1338,6 +1338,58 @@ input[type="color"]:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
select[disabled],
textarea[disabled],
input[type="text"][disabled],
input[type="password"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="time"][disabled],
input[type="week"][disabled],
input[type="number"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="color"][disabled],
select[readonly],
textarea[readonly],
input[type="text"][readonly],
input[type="password"][readonly],
input[type="datetime"][readonly],
input[type="datetime-local"][readonly],
input[type="date"][readonly],
input[type="month"][readonly],
input[type="time"][readonly],
input[type="week"][readonly],
input[type="number"][readonly],
input[type="email"][readonly],
input[type="url"][readonly],
input[type="search"][readonly],
input[type="tel"][readonly],
input[type="color"][readonly],
fieldset[disabled] select,
fieldset[disabled] textarea,
fieldset[disabled] input[type="text"],
fieldset[disabled] input[type="password"],
fieldset[disabled] input[type="datetime"],
fieldset[disabled] input[type="datetime-local"],
fieldset[disabled] input[type="date"],
fieldset[disabled] input[type="month"],
fieldset[disabled] input[type="time"],
fieldset[disabled] input[type="week"],
fieldset[disabled] input[type="number"],
fieldset[disabled] input[type="email"],
fieldset[disabled] input[type="url"],
fieldset[disabled] input[type="search"],
fieldset[disabled] input[type="tel"],
fieldset[disabled] input[type="color"] {
cursor: not-allowed;
background-color: #eeeeee;
}
input,
select,
textarea {
@ -1519,28 +1571,6 @@ input[type="color"].input-small {
border-radius: 3px;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly],
fieldset[disabled] input,
fieldset[disabled] select,
fieldset[disabled] textarea {
cursor: not-allowed;
background-color: #eeeeee;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
background-color: transparent;
}
.has-warning .control-label {
color: #c09853;
}

40
less/forms.less
View File

@ -72,6 +72,17 @@ input[type="color"] {
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
// Disabled and read-only inputs
// Note: HTML5 says that inputs 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;
}
}
// Reset appearance properties for textual inputs and textarea
@ -241,35 +252,6 @@ input[type="color"] {
}
// DISABLED STATE
// --------------
// Disabled and read-only inputs
// Note: HTML5 says that inputs 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.
input,
select,
textarea {
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
}
}
// Explicitly reset the colors here
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: transparent;
}
}
// FORM FIELD FEEDBACK STATES
// --------------------------