今天來分享一個好用的 CSS 偽元素屬性 focus-within ，會發現這個屬性是在專案開發時我遇到一個需求是希望 input 在 focus 狀態時，可以在外圍的線條可以變色，但是我的 HTML 結構式長成下面這個樣子。
很顯然的如果針對裡面的 input 寫單純的 focus 效果將會變成這樣！當然我們可不要這個效果～ 我們是要外圍那個 div 變成紅色線條呀！
此時如果你也跟我一樣不想再去改 HTML 也不想這樣小小的效果還要透過 JavaScript 去實現，那不妨來試試看 focus-within 屬性吧！
focus-within 屬性特點
基本上他就是只要在父層寫上偽元素例如這樣：
這樣一來只要父層內的子層有元素被 focus 的話，就可以改變父層的外框樣式囉！
不過他對 IE 並不支援，所以如果你的項目仍要支援 IE 的話就只能先替你默哀３秒鐘了。
這邊是程式碼範例供大家參考，如果你有更好的做法，也歡迎跟我分享。
