为什么改变焦点的显示/显示不起作用？ [英] Why changing visibility/display on focus does not work?

问题描述

当点击输入框将显示并拉伸时，我已经想出一个搜索按钮。然而，与其使用不可见复选框，我决定尝试使用标签，因为单击标签会将焦点放在标签所连接的元素上。虽然让焦点和做基本转换工作，但我似乎无法隐藏/显示文本框使用 visibility：hidden / visible 或显示：none / inline-block 。而且我不想只依赖不透明，因为即使隐藏文本框也可以找到/点击。

当前尝试： JsFiddle

为什么这不起作用？我做错了什么？

解决方案

不可见的元素无法获得焦点，因此：focus psuedo-class不能应用。

使用 width 和使用 $ b>不透明似乎会产生合理的效果。

I've gotten an idea to make a search "button" upon clicking which the input box would show up and stretch. However instead of using an invisible checkbox I decided to try and use the label since clicking the label would put focus on the element the label is connected to. And while giving focus and doing basic transformations do work, I can't seem to hide/show the textbox either using visibility: hidden/visible or display: none/inline-block. And I don't want to just rely on opacity since the textbox can be found/clicked even while it's hidden.

Current attempt: JsFiddle

Why doesn't this work? What am I doing wrong?

解决方案

Elements that are not visible cannot receive focus, therefore the :focus psuedo-class cannot apply.

Using width and opacity seems to produce a reasonable effect.

这篇关于为什么改变焦点的显示/显示不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！