Я хочу сделать что-то, что будет выглядеть как вход, но на самом деле нет, вот шаги.
Я сделал <input type="text">
.
Я добавил background-image
, которое покажет "стрелку выбора", создав впечатление, что это поле выбора.
Я добавил значение по умолчанию для этого ввода.
Там будет скрытый div, который будет SlideDown()
прямо под этим вводом, когда я 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');
}