Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML <p> tag always steals cursor from input field
    primarykey
    data
    text
    <p>I want a <code>&lt;p&gt;</code> tag (or a label might be correct actually) to appear behind an input field so that I can show the active caret on the input field and then hide the absolutely positioned <code>&lt;p&gt;</code> tag when the user starts to typing.</p> <p>you can see what the problem is here: <a href="http://jsfiddle.net/captainill/BG7Kx/" rel="nofollow">http://jsfiddle.net/captainill/BG7Kx/</a></p> <p>In the jsfiddle I've given the input a value to illustrate the problem although in the solution there'd be no default text in the input.</p> <p>relevant html:</p> <pre><code>&lt;form name="tagset-form" id="tagset-form" action="" method="get"&gt; &lt;p class="form-p-text"&gt;Add Set Name&lt;/p&gt; &lt;input id="tagset-name" class="text-input" type="text" value="some text that I would like to be above the &lt;p&gt; tag"&gt; &lt;input id="tagsubmit" type="submit" value="" style="display:none;"&gt; &lt;/form&gt; </code></pre> <p>css:</p> <pre><code>input#tagset-name{ width:100%; height:14px; padding:8px; line-height:15px; color:black; z-index: 2; } input:focus#tagset-name{ color:white; } .form-p-text{ z-index: 1; position:absolute; top:8px; left:180px; color:blue; font-weight:bold } </code></pre> <p>EDIT: this jquery plugin does exactly what I want: <a href="http://o2v.net/blog/jquery-formlabels-plugin" rel="nofollow">http://o2v.net/blog/jquery-formlabels-plugin</a></p> <p>It does so by creating a label, which when clicked, calls focus() on the input. It looks sharp too.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload