fixes #4526: box-shadow on .radio and .checkbox if .control-group has a form field state

This commit is contained in:
Mark Otto 2012-08-21 14:22:26 -07:00
parent e2ecd2df6c
commit 190d3c9c3e
3 changed files with 32 additions and 6 deletions

View File

@ -1301,14 +1301,17 @@ input[type="checkbox"][readonly] {
.control-group.warning select,
.control-group.warning textarea {
color: #c09853;
}
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.warning .checkbox:focus,
.control-group.warning .radio:focus,
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
@ -1337,14 +1340,17 @@ input[type="checkbox"][readonly] {
.control-group.error select,
.control-group.error textarea {
color: #b94a48;
}
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.error .checkbox:focus,
.control-group.error .radio:focus,
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
@ -1373,14 +1379,17 @@ input[type="checkbox"][readonly] {
.control-group.success select,
.control-group.success textarea {
color: #468847;
}
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
border-color: #468847;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.success .checkbox:focus,
.control-group.success .radio:focus,
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {

View File

@ -175,6 +175,10 @@
select,
textarea {
color: @textColor;
}
input,
select,
textarea {
border-color: @borderColor;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {

View File

@ -597,6 +597,19 @@
<h1>Forms</h1>
</div>
<h4>Horizontal form errors</h4>
<form class="form-horizontal">
<div class="control-group error">
<label class="control-label" for="inputError">Radio with error</label>
<div class="controls">
<label class="radio">
<input type="radio" id="inputError"> Oh hai
</label>
<span class="help-inline">Please correct the error</span>
</div>
</div>
</form>
<div class="row">
<div class="span4">
<h4>Prepend and append on inputs</h4>