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

Merge pull request #132 from tilomitra/readonly-input

Browse Source 
Differentiate [readonly] inputs from [disabled] inputs
This commit is contained in:
Eric Ferraiuolo 2013-07-16 10:39:59 -07:00
commit 7eae88794c
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
HISTORY.md
View File

@ -32,6 +32,8 @@ written in past tense.
[#94]: https://github.com/yui/pure/issues/94
[#95]: https://github.com/yui/pure/issues/95
* `[readonly]` inputs look visually different to `[disabled]` inputs and
regular inputs. `[readonly]` inputs do not have any `:focus` styles. (Issue [#102](https://github.com/yui/pure/issues/102)) (jaseg)
0.2.0 (2013-06-11)
------------------

18
src/forms/css/forms.css
View File

@ -78,15 +78,23 @@
.pure-form input[type="tel"][disabled],
.pure-form input[type="color"][disabled],
.pure-form select[disabled],
.pure-form textarea[disabled],
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
.pure-form textarea[disabled] {
cursor: not-allowed;
background-color: #eaeded;
color: #cad2d3;
border-color: transparent;
}
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly],
.pure-form input[readonly]:focus,
.pure-form select[readonly]:focus,
.pure-form textarea[readonly]:focus {
background: #eee; /* menu hover bg color */
color: #777; /* menu text color */
border-color: #ccc;
}
.pure-form input:focus:invalid,
.pure-form textarea:focus:invalid,
.pure-form select:focus:invalid {

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

@ -250,7 +250,13 @@
<h2>Disabled Inputs</h2>
<p>Add the disabled attribute to any form control.</p>
<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>
<h2>Rounded Form</h2>