html - 为什么更改焦点的可见性/显示不起作用？

Question

我有一个想法，即在单击输入框时会显示并拉伸(stretch)一个搜索“按钮”。但是，我决定尝试使用标签而不是使用不可见的复选框，因为单击标签会将焦点放在标签所连接的元素上。在给予焦点和进行基本转换的同时，我似乎无法使用 visibility: hidden/visible 或 display: none/inline-block 隐藏/显示文本框>。而且我不想仅仅依赖不透明度，因为即使隐藏了文本框也可以找到/单击它。

当前尝试:JsFiddle

为什么这行不通？我做错了什么？

Answer 1

不可见的元素无法获得焦点，因此 :focus 伪类无法应用。

使用 width 和 opacity 似乎可以产生合理的效果。