javascript - how to hide blinking caret in input text? - Stack Overflow

admin管理员组

文章数量:1134589

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

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

• javascript
• html
• css

Share Improve this question Follow edited Mar 7, 2024 at 16:43 miken32 42.7k1616 gold badges121121 silver badges171171 bronze badges asked Feb 17, 2012 at 17:53 user1213707user1213707 2,22144 gold badges1616 silver badges66 bronze badges 5

• 2 A possible solution. Another solution is to use a div styled to look like an input instead of an actual input. – approxiblue Commented Feb 17, 2012 at 18:00
• @JimmyX yes i thought about that but the thing is, this input (select) is in a form, the input fields all look like each other, and i dont feel like breaking the rule, and design another div with a fake look :P – user1213707 Commented Feb 17, 2012 at 18:10
• ...which takes us back to the first solution (link): create an invisible input on top of the display input, then connect the two with some js. – approxiblue Commented Feb 17, 2012 at 18:12
• I think you will find that the only way to do this is to not use an input field. The behaviors of the form fields are controlled by the browser, they aren't configurable. The only other thing I can think of is to set the focus someplace else, and that will cause other issues. – user785262 Commented Feb 24, 2012 at 3:23
• 1 Does this answer your question? Hide textfield blinking cursor – miken32 Commented Mar 7, 2024 at 16:22

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 192

Just add this to "inputselect" class:

caret-color: transparent;

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

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

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

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

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

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!

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.

try this

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

  &:focus {
      outline: none;
  }
}

本文标签： javascripthow to hide blinking caret in input textStack Overflow