Question

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

目前的尝试：JsFiddle

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

Answer 1

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

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

Answer 2

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

Answer 3

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

从：焦点改为：悬停。

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

Answer 4

您只能使用不透明度，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/

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

4 个答案: