From 4c5caee1aa19c8d693d7f4b88958c93e5c5fa719 Mon Sep 17 00:00:00 2001
From: jaseg <s@jaseg.de>
Date: Fri, 14 Jun 2013 17:17:03 +0200
Subject: [PATCH] Forms: Make [readonly] inputs easily readable

---
 src/forms/css/forms.css           | 11 +++++++----
 src/forms/tests/manual/forms.html |  8 +++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/forms/css/forms.css b/src/forms/css/forms.css
index e434b34..c45ba77 100644
--- a/src/forms/css/forms.css
+++ b/src/forms/css/forms.css
@@ -78,15 +78,18 @@
 .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] {
+    cursor: not-allowed;
+    color: #777;
+}
 .pure-form input:focus:invalid,
 .pure-form textarea:focus:invalid,
 .pure-form select:focus:invalid {
diff --git a/src/forms/tests/manual/forms.html b/src/forms/tests/manual/forms.html
index 247a348..c3f6ae8 100644
--- a/src/forms/tests/manual/forms.html
+++ b/src/forms/tests/manual/forms.html
@@ -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>