如何在任何輸入框關注時更改父兄弟的子標籤？

如何在任何輸入框關注時更改父兄弟的子標籤？如何在任何輸入框關注時更改父兄弟的子標籤？

我試圖改變任何輸入框時的標籤顏色。

<form> 
    <div class="parent-row"> 
     <div class="child-row"> 
      <select><option>Mr.</option><option>Mrs.</option></select> 
      <label>Name</label> 
     </div> 
     <div class="child-row"><input type="text" name="first_name"></div> 
     <div class="child-row"><input type="text" name="last_name"></div> 
    </div> 
</form>

我試過但沒有成功。

.parent-row:focus{ 
    .child-row label{ 
     color:red; 
    } 
}

和

.parent-row:focus,.parent-row:focus label{ 
    color:red; 
}

請幫助我的jsfiddle解決這個問題：https://jsfiddle.net/9kax864p/

來源

2016-10-22 Drone

CSS中沒有以前或父級選擇器。但是，如果您願意更改標記並隨元素順序播放，則可以使用一些答案[*在此處發佈*]（http://stackoverflow.com/q/1817792/5496966）。 – AA2992

這是不可能的，除非你或者** a：**改變HTML或** b：**使用JavaScript，因爲正如Drone所指出的那樣，CSS中還沒有父代選擇器（至今）。 –

-1

試試這個。

.parent-row input:focus, .parent-row:focus label{ 
    color:red; 
}

來源

2016-10-22 11:11:13 enucar

它改變爲輸入文字的顏色沒有標籤 – Drone

我改變了你的HTML代碼，因爲在CSS中沒有父母選擇器只選擇兄弟姐妹或孩子。

.parent-row select:focus ~ label{  
 
    color:red;   
 
} 
 

 
.parent-row input:focus ~ label{   
 
    color:red;   
 
}

<form> 
 
    <div class="parent-row"> 
 
    <div class="child-row"> 
 
     <input type="text" name="first_name"> 
 
     <input type="text" name="last_name"> 
 
     <select><option>Mr.</option><option>Mrs.</option></select> 
 
     <label>Name</label> 
 
    </div> 
 
    </div> 
 
</form>

還可以看到在codepen。

來源

2016-10-22 11:25:58 oguzhancerit

你改了html – Drone

如何在任何輸入框關注時更改父兄弟的子標籤？

回答

相關問題