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

Question

新手上路，请多包涵

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

我做了一个 <input type="text"> 。

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

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

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

我试过只读的东西，这样值就不能改变，但闪烁的光标会出现。

如果我使用 disabled ，闪烁的光标将不会显示，但 .click() 或 .focus 在 jQuery 中不起作用。下拉菜单不会 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');
}