爲什麼改變焦點的顯示/顯示不起作用？

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/