Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to hide blinking cursor in input text?

I want to make something which would look like a select input but is actually not, here are the steps.

I made an <input type="text">.

I added a background-image, which will show a "select arrow", giving the impression that it's a select box.

I added a default value to this input.

There will be a hidden div which will SlideDown() right under this input when I click on it.

I tried the read only thing so that the value cannot be changed, but the blinking cursor will show up.

If I use disabled, the blinking cursor will not show up, but the .click() or .focus function in jQuery will not work. The drop down menu will not SlideDown().

How can I make it clickable while not showing the blinking cursor?

Here's the code

<div style="padding-top:17px; overflow:hidden;">     <div style="float:left;">         <label for="secretquestion">Secret Question</label><br>         <input type="text" class="inputselect" id="secretquestion" name="secretquestion" value="Choose a Secret Question" tabindex=10 /><br>         <div class="selectoptions" id="secretquestionoptions">             <b>test</b>         </div>      </div> </div> 

CSS

.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'); } 
like image 966
user1213707 Avatar asked Feb 17 '12 17:02

user1213707


People also ask

How do I get rid of the text cursor?

situated at the top right. Select Settings from the drop-down menu that appear. Scroll to the end of the page, and click to expand Advanced settings. Scroll to the Accessibility section and disable the toggle next to 'Navigate pages with a text cursor' to turn off the blinking cursor.


2 Answers

Just add this to "inputselect" class:

caret-color: transparent; 
like image 87
cani Avatar answered Sep 28 '22 03:09

cani


The color of the cursor matches the color of the text.

<input type="text" style="color: transparent"> 

If you actually want to show text in the input box (my, some people are needy), you can use a text shadow.

<style>     body, div, input {        color: #afa;        text-shadow: 0px 0px 1px #fff;     } <style> 

(tested Firefox and Safari).

like image 32
Orwellophile Avatar answered Sep 28 '22 01:09

Orwellophile