CODEWITHSUNDEEP
javascripthtmlcss
user1213707
user1213707

Reputation: 2231

how to hide blinking caret 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 caret will show up.

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

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

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');
}

Upvotes: 101

Views: 166276

Answers (8)

Shubham Vijay
Shubham Vijay

Reputation: 78

try this

input {
  color: transparent;
  text-shadow: 0 0 0 #2196f3;

  &:focus {
      outline: none;
  }
}

Upvotes: 1

Sandeep Mandal
Sandeep Mandal

Reputation: 31

try this code it worked on me :-

<div class="input-parent" style="margin-left: 30px;">
     <input type="text" />
</div>


input-parent {
    width: 100px;
    height: 30px;
    overflow: hidden;
    }
.input-parent input {
    width: 120px;
    height: 30px;
    margin-left: -20px;
    text-align: left;
    caret-color: transparent;
    }

Upvotes: 3

cani
cani

Reputation: 2050

Just add this to "inputselect" class:

caret-color: transparent;

Upvotes: 193

Michael McGettrick
Michael McGettrick

Reputation: 93

This may be helpful (though not a complete response) - I used it to disable input in a recent project:

document.getElementById('Object').readOnly = true;
    document.getElementById('Object').style.backgroundColor = '#e6e6e6';
    document.getElementById('Object').onfocus = function(){
        document.getElementById('Object').blur();
    };

The user focuses on the input when the click in it, the blur() function then removes the focus. Between this, setting the readOnly to "True" and setting the background color to grey (#e6e6e6), your user shouldn't get confused.

Upvotes: 1

wupeng
wupeng

Reputation: 63

I finally find a trick solution.

<div class="wrapper">
    <input type="text" />
</div>

.wrappr {
    width: 100px;
    height: 30px;
    overflow: hidden;
}
.wrapper input {
    width: 120px;
    height: 30px;
    margin-left: -20px;
    text-align: left;
}

and in my sitation, it works!

Upvotes: 1

sinfere
sinfere

Reputation: 943

I think this is a perfect solution: make the input wide enough, align right to screen right, thus make cursor and content locate at the outside of the screen, while it's still clickable

perfect solution

Upvotes: 9

rtconner
rtconner

Reputation: 1237

I just used a blur to get rid of the cursor.

$('input').mousedown(function(e){
  e.preventDefault();
  $(this).blur();
  return false;
});

Upvotes: 10

Orwellophile
Orwellophile

Reputation: 13933

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).

Upvotes: 65

Related Questions