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。