如何在输入文本中隐藏闪烁的光标?

时间:2012-02-17 17:53:48

标签: javascript jquery html css

我想做一些看起来像选择输入的东西,但实际上不是,这是步骤。

我做了<input type="text">

我添加了background-image,会显示“选择箭头”,给人的印象是它是一个选择框。

我在此输入中添加了默认值。

当我点击它时,会有一个隐藏的div SlideDown()在这个输入下面。

我尝试了只读的东西,以便无法更改值,但会显示闪烁的光标。

如果我使用disabled,闪烁的光标将不会显示,但jQuery中的.click().focus函数将无效。下拉菜单不会SlideDown()

如何在不显示闪烁光标的情况下使其可点击?

这是代码

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

5 个答案:

答案 0 :(得分:40)

光标的颜色与文本的颜色相匹配。

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

如果你真的想在输入框中显示文字(我的,有些人有需要),你可以使用文字阴影。

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

(测试了Firefox和Safari)。

答案 1 :(得分:18)

只需将其添加到“ inputselect”类中即可:

caret-color: transparent;

答案 2 :(得分:9)

我只是使用模糊来摆脱光标。

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

答案 3 :(得分:1)

我终于找到了一个技巧解决方案。

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

在我的作品中,它有效!

答案 4 :(得分:0)

这可能会有所帮助(虽然不是完整的回复) - 我用它来禁用最近项目中的输入:

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

用户在点击输入时会关注输入,模糊()功能会移除焦点。在此之间,将readOnly设置为“True”并将背景颜色设置为灰色(#e6e6e6),您的用户不应该感到困惑。