使用CSS隐藏输入框后，文本输入框的自动完成下拉菜单保留下来

我使用CSS left: 9999em;来隐藏<div>和left: 0em以在悬停时显示。使用CSS隐藏输入框后，文本输入框的自动完成下拉菜单保留下来

div包含一个文本输入框。如果通过删除鼠标隐藏div，输入框的打开自动完成下拉列表框中的自动完成框仍然保留在页面上。

我怎样才能隐藏那个呢？ CSS解决方案是最好的。（我想我知道如何使用jQuery。）我做不是想要禁用这个盒子的自动完成功能，我只是希望它在盒子本身消失后不再使用。

的jsfiddle：http://jsfiddle.net/ou5cgzpv/

后，双击：

enter image description here

卸下鼠标后：

enter image description here

来源

2015-07-04 Alexander Gelbukh

是否有你不使用可见性CSS属性的原因？ – user2027202827

@hobenkr我试着'知名度'，效果相同。原因是我需要延迟，并且我为此使用了动画（我不知道如何延迟可视性更改）。但无论如何，效果是一样的。 –

我运行你的例子的问题是在文本框被隐藏后，我不小心打了我的键盘，屏幕被压缩到9999em;）至于你的实际问题是有什么地方我们可以看到一个活的例子？您的下拉式选项在JSFiddle上不起作用。 – user2027202827

CSS - 在这方面input领域正在被隐藏，而不是您的inner元素正在转移编辑在右边。

#container { 
    width: 135px; 
    height: 20px; 
    background: green; 
    padding: 10px; 
} 
input { 
    display: none; 
    width: 130px; 
} 
#container:hover input { 
    display: block; 
}

HTML表单

<div id="container"> 
<form id="form"> 
    <input type="text" name="autocomplete" /> 
</form>

来源

2015-07-04 02:44:26 vanburen

对不起，我试过你的解决方案，但效果是一样的：http://jsfiddle.net/v1xtca2k/。我将该名称更改为'name'，因为它有一些自动完成选项。 –

是否有可能展示这个（来自互联网）的工作示例，因为我不完全理解您正在尝试做什么。 – vanburen

我更新了小提琴，以便您可以首先使用一些提交填充自动填充：http://jsfiddle.net/kqr0t3xn/。 –

在镀铬，因为正确地指出通过vanburenx，display: none;删除自动填充下拉列表。在FireFox和IE中它并不是。

用JavaScript或jQuery，blur()input type=text在onmouseleave()为容器;这将删除下拉菜单。

任何与纯CSS的答案仍然欢迎！

来源

2015-07-04 10:39:14

使用CSS隐藏输入框后，文本输入框的自动完成下拉菜单保留下来

回答

相关问题