CSS，啓用樣式條件

Question

我在我的網站上工作，所以即使JavaScript被禁用，它看起來和工作幾乎一樣，所以我有一個INPUT和TEXTAREA標籤，當啓用JavaScript我可以集中我的鼠標INPUT和TEXTAREA風格從display: none變成display: block，如果用戶關注INPUT標籤，然後將某些樣式應用於TEXTAREA標籤，有沒有辦法用CSS檢查？謝謝大家，祝你有美好的一天。

Answer 1

您可以使用adjacent selector這樣的：

JSFiddle Demo

HTML：

Click on the text input 
<input type="text"> 
<textarea name="" id="" cols="30" rows="10"></textarea> 

CSS

input[type=text]:focus {border:1px solid red; } 
textarea { display:none; } 
input[type=text]:focus + textarea {display:block; } 

雖然你會發現，你不能真正點擊並專注於textarea的當它出現時。

Answer 2

如果你有textbox比對後textarea，您可以使用+adjacent selector

textarea { 
    display: none; 
} 

input[type=text]:focus + textarea { 
/* Switching styles for textarea when textbox is focused*/ 
    display: block; 
} 

Demo

注：一類添加到input[type=text]選擇特定 元素，否則上述選擇器將觸發全部textarea和 input[type=text]元素

Answer 3

是的，你可以使用Pseudo-classes
範例CSS做它:focus

Answer 4

爲了避免隱藏textarea重點input使用以下後：

textarea:hover,textarea:focus{ 
    display:block; 
} 

見demo here。