如何隐藏输入文本中的闪烁光标？ [英] 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.

我做了一个 ; input type =text> 。

我添加了一个 background-image

我为此输入添加了默认值。

I added a default value to this input.

当我点击它时，会有一个隐藏的div SlideDown（）。

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.

如果我使用 disabled ，闪烁的光标将不会显示，但 .click（）或 .focus 在jQuery中的函数不会工作。下拉菜单不会 SlideDown（）。

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?

以下是代码

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

推荐答案

文本的颜色。

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

如果你真的想在输入框中显示文本（my，有些人需要）可以使用文本阴影。

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>

（测试Firefox和Safari）。

(tested Firefox and Safari).

这篇关于如何隐藏输入文本中的闪烁光标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！