github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

tweak readonly, disabled, and uneditable form elements

Browse Source
This commit is contained in:
Mark Otto
2011-09-02 21:54:11 -07:00
parent c4481b54a8
commit d5e42cf81a
4 changed files with 86 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
lib/forms.less
View File

@@ -113,11 +113,13 @@ textarea {
height: auto;
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
background-color: #eee;
background-color: #fff;
display: block;
border-color: #ccc;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.075));
border-color: #eee;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
// Placeholder text gets special styles; can't be bundled together though for some reason
@@ -130,12 +132,14 @@ textarea {
// Focus states
input,
select, textarea {
select,
textarea {
@transition: border linear .2s, box-shadow linear .2s;
.transition(@transition);
.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: rgba(82,168,236,.8);
@@ -175,35 +179,56 @@ form div.error {
}
// Form element sizes
.input-mini, input.mini, textarea.mini, select.mini {
.input-mini,
input.mini,
textarea.mini,
select.mini {
width: 60px;
}
.input-small, input.small, textarea.small, select.small {
.input-small,
input.small,
textarea.small,
select.small {
width: 90px;
}
.input-medium, input.medium, textarea.medium, select.medium {
.input-medium,
input.medium,
textarea.medium,
select.medium {
width: 150px;
}
.input-large, input.large, textarea.large, select.large {
.input-large,
input.large,
textarea.large,
select.large {
width: 210px;
}
.input-xlarge, input.xlarge, textarea.xlarge, select.xlarge {
.input-xlarge,
input.xlarge,
textarea.xlarge,
select.xlarge {
width: 270px;
}
.input-xxlarge, input.xxlarge, textarea.xxlarge, select.xxlarge {
.input-xxlarge,
input.xxlarge,
textarea.xxlarge,
select.xxlarge {
width: 530px;
}
textarea.xxlarge {
overflow-y: scroll;
overflow-y: auto;
}
// Turn off focus for disabled (read-only) form elements
input[readonly]:focus,
textarea[readonly]:focus,
input.disabled {
background: #f5f5f5;
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #f5f5f5;
border-color: #ddd;
.box-shadow(none);
cursor: not-allowed;
}
// Actions (the buttons)