title: how to hide blinking cursor in input text?
body: <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>