mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
tweak readonly, disabled, and uneditable form elements
This commit is contained in:
Mark Otto
parent
c4481b54a8
commit
d5e42cf81a
29
bootstrap-1.2.0.css
vendored
29
bootstrap-1.2.0.css
vendored
@ -6,7 +6,7 @@
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Fri Sep 2 20:59:16 PDT 2011
|
||||
* Date: Fri Sep 2 21:53:08 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
@ -707,12 +707,12 @@ textarea {
|
||||
height: auto;
|
||||
}
|
||||
.uneditable-input {
|
||||
background-color: #eee;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
border-color: #ccc;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
border-color: #eee;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: #bfbfbf;
|
||||
@ -728,7 +728,7 @@ input, select, textarea {
|
||||
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
input:focus, textarea:focus {
|
||||
input:focus, select:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
@ -800,14 +800,17 @@ select.xxlarge {
|
||||
width: 530px;
|
||||
}
|
||||
textarea.xxlarge {
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
input[readonly]:focus, textarea[readonly]:focus, input.disabled {
|
||||
background: #f5f5f5;
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.actions {
|
||||
background: #f5f5f5;
|
||||
|
||||
8
bootstrap-1.2.0.min.css
vendored
8
bootstrap-1.2.0.min.css
vendored
@ -112,11 +112,11 @@ input[type=file]{background-color:#fff;padding:initial;border:initial;line-heigh
|
||||
input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
|
||||
select,input[type=file]{height:27px;line-height:27px;}
|
||||
textarea{height:auto;}
|
||||
.uneditable-input{background-color:#eee;display:block;border-color:#ccc;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);}
|
||||
.uneditable-input{background-color:#fff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);}
|
||||
:-moz-placeholder{color:#bfbfbf;}
|
||||
::-webkit-input-placeholder{color:#bfbfbf;}
|
||||
input,select,textarea{-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
|
||||
input:focus,textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
|
||||
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);}
|
||||
form div.error{background:#fae5e3;padding:10px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}form div.error>label,form div.error span.help-inline,form div.error span.help-block{color:#9d261d;}
|
||||
form div.error input,form div.error textarea{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}form div.error input:focus,form div.error textarea:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
|
||||
form div.error .input-prepend span.add-on,form div.error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
|
||||
@ -126,8 +126,8 @@ form div.error .input-prepend span.add-on,form div.error .input-append span.add-
|
||||
.input-large,input.large,textarea.large,select.large{width:210px;}
|
||||
.input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
|
||||
.input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
|
||||
textarea.xxlarge{overflow-y:scroll;}
|
||||
input[readonly]:focus,textarea[readonly]:focus,input.disabled{background:#f5f5f5;border-color:#ddd;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
|
||||
textarea.xxlarge{overflow-y:auto;}
|
||||
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
|
||||
.actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
|
||||
.help-inline,.help-block{font-size:12px;line-height:18px;color:#bfbfbf;}
|
||||
.help-inline{padding-left:5px;*position:relative;*top:-5px;}
|
||||
|
||||
@ -621,7 +621,7 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="xlInput">X-Large Input</label>
|
||||
<label for="xlInput">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
|
||||
</div>
|
||||
@ -651,19 +651,25 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label>Uneditable Input</label>
|
||||
<label>Uneditable input</label>
|
||||
<div class="input">
|
||||
<span class="uneditable-input">Some Value Here</span>
|
||||
<span class="uneditable-input">Some value here</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="disabledInput">Disabled Input</label>
|
||||
<label for="disabledInput">Disabled input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here… carry on." disabled />
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="disabledInput">Disabled textarea</label>
|
||||
<div class="input">
|
||||
<textarea class="xxlarge" name="textarea" id="textarea" rows="3" disabled></textarea>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix error">
|
||||
<label for="xlInput2">X-Large Input</label>
|
||||
<label for="xlInput2">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge error" id="xlInput2" name="xlInput2" size="30" type="text" />
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
@ -673,7 +679,7 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="prependedInput">Prepended Text</label>
|
||||
<label for="prependedInput">Prepended text</label>
|
||||
<div class="input">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on">@</span>
|
||||
@ -682,7 +688,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="prependedInput2">Prepended Checkbox</label>
|
||||
<label for="prependedInput2">Prepended checkbox</label>
|
||||
<div class="input">
|
||||
<div class="input-prepend">
|
||||
<label class="add-on"><input type="checkbox" name="" id="" value="" /></label>
|
||||
@ -691,7 +697,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="appendedInput">Appended Checkbox</label>
|
||||
<label for="appendedInput">Appended checkbox</label>
|
||||
<div class="input">
|
||||
<div class="input-append">
|
||||
<input class="mini" id="appendedInput" name="appendedInput" size="16" type="text" />
|
||||
@ -700,7 +706,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="fileInput">File Input</label>
|
||||
<label for="fileInput">File input</label>
|
||||
<div class="input">
|
||||
<input class="input-file" id="fileInput" name="fileInput" type="file" />
|
||||
</div>
|
||||
@ -709,7 +715,7 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label id="optionsCheckboxes">List of Options</label>
|
||||
<label id="optionsCheckboxes">List of options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
@ -743,7 +749,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label>Date Range</label>
|
||||
<label>Date range</label>
|
||||
<div class="input">
|
||||
<div class="inline-inputs">
|
||||
<input class="small" type="text" value="May 1, 2011" />
|
||||
@ -758,14 +764,14 @@
|
||||
<div class="clearfix">
|
||||
<label for="textarea">Textarea</label>
|
||||
<div class="input">
|
||||
<textarea class="xxlarge" id="textarea" name="textarea"></textarea>
|
||||
<textarea class="xxlarge" id="textarea2" name="textarea2" rows="3"></textarea>
|
||||
<span class="help-block">
|
||||
Block of help text to describe the field above if need be.
|
||||
</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label id="optionsRadio">List of Options</label>
|
||||
<label id="optionsRadio">List of options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
@ -784,7 +790,7 @@
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="actions">
|
||||
<input type="submit" class="btn primary" value="Save Changes"> <button type="reset" class="btn">Cancel</button>
|
||||
<input type="submit" class="btn primary" value="Save changes"> <button type="reset" class="btn">Cancel</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
@ -803,7 +809,7 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="xlInput3">X-Large Input</label>
|
||||
<label for="xlInput3">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge" id="xlInput3" name="xlInput3" size="30" type="text" />
|
||||
</div>
|
||||
@ -824,14 +830,14 @@
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix error">
|
||||
<label for="xlInput4">X-Large Input</label>
|
||||
<label for="xlInput4">X-Large input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge error" id="xlInput4" name="xlInput4" size="30" type="text" />
|
||||
<span class="help-inline">Small snippet of help text</span>
|
||||
</div>
|
||||
</div><!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label id="optionsCheckboxes">List of Options</label>
|
||||
<label id="optionsCheckboxes">List of options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
@ -854,7 +860,7 @@
|
||||
</div><!-- /clearfix -->
|
||||
</fieldset>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn primary">Save Changes</button> <button type="reset" class="btn">Cancel</button>
|
||||
<button type="submit" class="btn primary">Save changes</button> <button type="reset" class="btn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user