From 6b9d74776de4a2b8ca015b19d70baa05ecf31ea6 Mon Sep 17 00:00:00 2001
From: Walter Lee Davis <waltd@wdstudio.com>
Date: Thu, 7 May 2015 23:03:41 -0400
Subject: [PATCH] added pure-css placeholder recipe

---
 _posts/2009-01-01-ajax-inplaceeditor.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/_posts/2009-01-01-ajax-inplaceeditor.html b/_posts/2009-01-01-ajax-inplaceeditor.html
index b244129..02300a6 100644
--- a/_posts/2009-01-01-ajax-inplaceeditor.html
+++ b/_posts/2009-01-01-ajax-inplaceeditor.html
@@ -489,6 +489,21 @@ <h3>In-Place edits only by externalControl</h3>
 }
 </code></pre>
 <p>maybe someone can add a flag like ‘only <span style="color:#aaa"> External Control </span><a href="http://github.com/madrobby/scriptaculous/wikis/new?title=+External+Control+’">?</a> to add this to the trunk ..</p>
+<h2>Pure CSS way to add placeholder text to an empty editable text item:</h2>
+<pre>
+<div class="editable"></div>
+<style>
+  .editable:empty {
+    position: relative;
+    min-height: 1em;
+  }
+  .editable:empty:after {
+    content: 'Click to edit';
+    position: absolute;
+    color: #bbb;
+  }
+</style
+</pre>
 <h2>Small extension to editor to add a text in case field is empty.</h2>
 <pre><code class="javascript">
 /*
@@ -636,4 +651,4 @@ <h2 style="vertical-align:middle;">Validation.</h2>
     return false;
   },
 </code></pre>
-</div>
\ No newline at end of file
+</div>