library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-24 10:44:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Forms: Make [readonly] inputs easily readable

Browse Source
This commit is contained in:
jaseg 2013-06-14 17:17:03 +02:00
parent 3782be8c29
commit 4c5caee1aa
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/forms/css/forms.css
View File

@ -78,15 +78,18 @@
.pure-form input[type="tel"][disabled], .pure-form input[type="tel"][disabled],
.pure-form input[type="color"][disabled], .pure-form input[type="color"][disabled],
.pure-form select[disabled], .pure-form select[disabled],
.pure-form textarea[disabled], .pure-form textarea[disabled] {
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
cursor: not-allowed; cursor: not-allowed;
background-color: #eaeded; background-color: #eaeded;
color: #cad2d3; color: #cad2d3;
border-color: transparent; border-color: transparent;
} }
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
cursor: not-allowed;
color: #777;
}
.pure-form input:focus:invalid, .pure-form input:focus:invalid,
.pure-form textarea:focus:invalid, .pure-form textarea:focus:invalid,
.pure-form select:focus:invalid { .pure-form select:focus:invalid {

8
src/forms/tests/manual/forms.html
View File

@ -250,7 +250,13 @@
<h2>Disabled Inputs</h2> <h2>Disabled Inputs</h2>
<p>Add the disabled attribute to any form control.</p> <p>Add the disabled attribute to any form control.</p>
<form class="pure-form"> <form class="pure-form">
<input class="pure-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> <input class="pure-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." value="Foo bar baz" disabled>
</form>
<h2>Readonly Inputs</h2>
<p>Add the readonly attribute to any form control.</p>
<form class="pure-form">
<input class="pure-input-xlarge" id="readonlyInput" type="text" placeholder="Readonly input here..." value="Foo bar baz" readonly>
</form> </form>
<h2>Rounded Form</h2> <h2>Rounded Form</h2>