Я хочу сделать что-то, что будет похоже на выборочный ввод, но на самом деле это не так, вот шаги.

Я сделал<input type="text">.

Я добавилbackground-image, который покажет «стрелку выбора», создавая впечатление, что это поле выбора.

Я добавил значение по умолчанию для этого ввода.

Там будет скрытый div, который будетSlideDown() прямо под этим входом, когда я нажимаю на него.

Я попробовал только для чтения, так что значение не может быть изменено, b, но мигающий курсор появится.

Если я использую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');
}