为什么更改焦点上的可见性/显示不起作用?

MrP*_*low 5 html css css3

我已经有了一个想法,点击输入框将显示和拉伸的搜索"按钮".然而,我没有使用不可见的复选框,而是决定尝试使用标签,因为单击标签会将焦点放在标签所连接的元素上.虽然提供焦点并进行基本转换确实有效,但我似乎无法使用visibility: hidden/visible或隐藏/显示文本框display: none/inline-block.而且我不想仅仅依赖于不透明度,因为即使它被隐藏也可以找到/点击文本框.

目前的尝试:JsFiddle

为什么这不起作用?我究竟做错了什么?

Nie*_*sol 7

不可见的元素无法获得焦点,因此:focuspsuedo-class无法应用.

使用widthopacity似乎产生了合理的效果.