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

我有一个想法，点击一个搜索“按钮”，输入框就会出现并伸展。但是，我没有使用不可见的复选框，而是决定尝试使用标签，因为单击标签会将焦点放在标签所连接的元素上。在提供焦点和进行基本转换时，我似乎无法使用

可见性：隐藏/可见

或

显示：无/内联块

隐藏/显示文本框。我不想仅仅依赖于不透明度，因为文本框即使在隐藏的时候也可以被找到/点击

当前尝试：

---

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

不可见的元素无法接收焦点，因此无法应用

：focus

psuedo类

---

使用

width

和

opacity

似乎可以产生合理的效果。

标签不是可聚焦的元素，因此无法真正获得焦点。 请参见此处的答案：

小提琴：

从：焦点更改为：悬停

产生的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;
}

---

只能使用不透明度、

可见性：隐藏或
显示：无不允许焦点（IMHO），因为元素不可见

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;
}

我明白了。。。所以要么是不透明度，要么是使用复选框技巧。谢谢你的回答“你不应该允许焦点”，如果我想操纵一个不可见的输入元素来使用复制事件？