jquery - CSS のターゲット ラベル

Question

css3 で入力のラベルをターゲットにする方法はありますか? たとえば、私はこの方法を試しました -

input[type="text"]:focus label:target {
    color:orange !important;
}

うまくいかないようですが、疑問に思っているだけですか、それともこれは jquery だけの仕事ですか?

ありがとう！

Answer 1

:target疑似クラスはあなたが思っていることをしませんしlabel、の子孫として存在することは決してできないinputので、うまくいきません。

親子関係または属性によって にlabel関連付けられているを参照しようとしている場合、CSS3 ではそれができません。次のいずれかで、 に続く兄弟である場合にのみ、 を参照できます。inputforlabelinput

input[type="text"]:focus + label
input[type="text"]:focus ~ label

が祖先、兄弟の前、または完全に別の場所にある場合labelは、jQuery を使用して DOM を走査し、その場所を特定する必要があります。

Answer 2

CSS4を使用すると、次のことができます。

!label /for/ input[type="text"]:focus,
!label input[type="text"]:focus {
    ...
}

1つ目はを許可し<label for="inputid">、2つ目は<label><input type="text"/></label>

ただし、CSS4のサポートは非​​常に制限されています。それでも、そこに置いても害はありません。