title: cursor in transparent textarea
body: <p>I wrote a small jQuery-plugin to highlight different parts in a textarea.</p>
  
  <p>I added a <code>&lt;pre&gt;</code> behind the textarea which displays the code highlighted, the textarea is transparent:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;textarea class="edit" rows="10"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>pre {
      position: absolute;
      z-index: -1;
  
      outline: 1px dashed red;
  }
  
  .edit {
      outline: 1px dotted blue;
      opacity: 1;
      width: 50%;
  
      color: #000;
      border: 0px solid transparent;
      background: transparent;
  
      resize: vertical;
  }
  
  pre, .edit {
      overflow: auto;
      margin: 0;
      padding: 0;
  
      tab-size: 4;
      -o-tab-size: 4;
      -moz-tab-size: 4;
  
      line-height: 17px;
      font-family: monospace; 
      font-size: 13px;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
      $('.edit').after('&lt;pre&gt;&lt;/pre&gt;');
  
      var $code = $('pre');
      var position = $('.edit').position();
  
      $code.css('left', position.left + 'px');
      $code.css('top', position.top + 'px');
      $code.css('width', $('.edit').innerWidth() + 'px');
      $code.css('height', $('.edit').innerHeight() + 'px');
  
      $('.edit').on('input', function() {
           $('pre').html($(this).val());   
      });
  });
  </code></pre>
  
  <p>Here is a preview: <a href="http://jsfiddle.net/Recode/HaPAe/" rel="nofollow">http://jsfiddle.net/Recode/HaPAe/</a></p>
  
  <p>If I change the <code>color</code> of the text in the textarea to <code>transparent</code>, the cursor also disappears, because in Firefox (and some other browsers) it has always the same color as the text.</p>
  
  <p>I found this snippet:</p>
  
  <pre><code>.edit { cursor: url(cursor.cur), default; }
  </code></pre>
  
  <p>But this changes only the mouse-cursor and not the one that says where I am in my text.</p>
  
  <p>Is there a way to have a visible cursor although the text is transparent?</p>