我想做一些看起来像选择输入的东西,但实际上不是,这是步骤。
我做了<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');
}
答案 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),您的用户不应该感到困惑。