为什么改变焦点的可见性/显示不起作用？答案

【问题标题】：Why changing visibility/display on focus does not work?为什么改变焦点的可见性/显示不起作用？
【发布时间】：2023-03-06 01:25:01
【问题描述】：

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

当前尝试：JsFiddle

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

我明白了......所以它要么是不透明的，要么是使用复选框技巧。感谢您的回答

【解决方案2】：

您只能使用不透明度，visibility:hidden 或 display:none; 不应该允许焦点（恕我直言），因为元素不可见。

form label {
    font-size: 23px;
}

#box {
    width: 0px;
  opacity:0;
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:focus {
   opacity:1;
    width: 50px;
}

http://jsfiddle.net/6h8cF/7/

【讨论】：

“不应该允许焦点”，如果我想操纵 invisible 输入元素来使用复制事件？

【解决方案3】：

您无法真正从标签中获得焦点，因为它不是可聚焦的元素。请参阅此处的 BoltClocks 答案：Anyway to have a label respond to :focus CSS

【讨论】：

【解决方案4】：

小提琴： http://jsfiddle.net/h6NNs/

从 :focus 更改为 :hover。

生成的 CSS 应该是：

form label {
    font-size: 23px;
}

#box {
    width: 0px;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:hover{
    visibility: visible;
    opacity: 1;    
    width: 50px;
}

【讨论】：