css - CSS，根据条件启用样式

Question

我在我的网站上工作，所以即使禁用 JavaScript，它的外观和工作方式也几乎相同，所以当 JavaScript 启用时我有一个 INPUT 和 TEXTAREA 标签，我可以将鼠标集中在 INPUT 上，TEXTAREA样式display: block从display: none如果用户专注于 INPUT 标签然后将一些样式应用于 TEXTAREA 标签，如何使用 CSS 检查？谢谢大家，祝您有美好的一天。

Answer 1

如果你有textarea之后textbox比是，你可以使用+ adjacent selector

textarea {
    display: none;
}

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

演示

注意：添加一个类来input[type=text]选择特定元素，否则上面的选择器将触发所有textarea和 input[type=text]元素

Answer 2

为避免textarea在关注后隐藏，请input使用以下内容：

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

在此处查看演示。

Answer 3

是的，您可以使用 CSS 使用Pseudo-classes
Example for :focus来做到这一点

Answer 4

你可以使用adjacent selector这样的：

JSFiddle 演示

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

尽管您会注意到，当它出现时，您实际上无法单击并专注于文本区域。