更改标签的文本颜色的焦点输入

Question

这是我的HTML代码：

<label> 
    <p>text description</p> 
    <input type="text"> 
</label> 

当注重<input>，我想改变text-color的<p>标签内。

如何编写CSS代码？

Answer 1

这是可能的使用:focus-within伪类选择。

焦点在CSS伪类匹配：焦点伪类匹配或具有：焦点伪类匹配后代的任何元素。 （这包括在阴影栽树后人。）

:focus-within @ MDN

Support Details

lable { 
 
    margin: 1em; 
 
    border: 1px solid grey; 
 
} 
 

 
label:focus-within p { 
 
    color: red; 
 
}

<label> 
 
    <p>text description</p> 
 
    <input type="text"> 
 
</label>

Answer 2

您不能从<input>访问前一个同级元素（<p>）。

但是你可以采用如下方案：

label { 
 
    display:flex; 
 
} 
 
p { 
 
    order:-1; 
 
} 
 
input:focus ~ p { 
 
    color:red; 
 
}

<label> 
 
    <input type="text"> 
 
    <p>text description</p> 
 
</label>