更改標籤的文本顏色的焦點輸入

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>