Databases
StackOverflow2013
Postsdbo
POhow to hide blinking cursor in input text?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to hide blinking cursor in input text?
    text
    copied!<p>I want to make something which would look like a select input but is actually not, here are the steps.</p> <p>I made an <code>&lt;input type="text"&gt;</code>.</p> <p>I added a <code>background-image</code>, which will show a "select arrow", giving the impression that it's a select box.</p> <p>I added a default value to this input.</p> <p>There will be a hidden div which will <code>SlideDown()</code> right under this input when I click on it.</p> <p>I tried the read only thing so that the value cannot be changed, but the blinking cursor will show up.</p> <p>If I use <code>disabled</code>, the blinking cursor will not show up, but the <code>.click()</code> or <code>.focus</code> function in jQuery will not work. The drop down menu will not <code>SlideDown()</code>.</p> <p>How can I make it clickable while not showing the blinking cursor? </p> <p>Here's the code</p> <pre><code>&lt;div style="padding-top:17px; overflow:hidden;"&gt; &lt;div style="float:left;"&gt; &lt;label for="secretquestion"&gt;Secret Question&lt;/label&gt;&lt;br&gt; &lt;input type="text" class="inputselect" id="secretquestion" name="secretquestion" value="Choose a Secret Question" tabindex=10 /&gt;&lt;br&gt; &lt;div class="selectoptions" id="secretquestionoptions"&gt; &lt;b&gt;test&lt;/b&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>.selectoptions { display: none; background-color: white; color: rgb(46,97,158); width: 250px; margin:auto; border-style: solid; border-width:1px; border-color: rgb(46,97,158); font-size: 14px; text-align: center; } .inputselect { color: white; cursor: pointer; background-image: url('inputselect.png'); padding-top: 5px; padding-bottom: 5px; padding-left:10px; padding-right:-10px; width:240px; border-style: solid; border-color: rgb(46,97,158); border-width: 1px; } .inputselect:hover { outline:none; color:aqua; cursor: pointer; background-image: url('inputselecthover.png'); } .inputselect:focus { outline:none; color:aqua; cursor: pointer; background-image: url('inputselecthover.png'); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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