Um seletor adjacente corresponde a um elemento imediatamente seguido pelo próximo elemento (E + F). Se usarmos a ordem comum dos elementos do formulário – rótulo seguido de entrada – já estaremos presos. Ok, vamos revertê-los. Mas então surge um novo problema! Sim, visualmente, o rótulo segue após o campo de entrada real. Se você quiser colocá-lo novamente acima da entrada de texto, precisamos mudar (visualmente) as posições dos controles novamente. Isso pode ser feito por meio de uma pseudotabela CSS.
<div class="pseudo-table">
<input id="yourname" name="yourname" type="text" placeholder="Name...">
<label for="yourname">Name</label>
</div>O estilo da mesa artificial é …
.pseudo-table { display: table; }Com isso no lugar, poderíamos transformar o rótulo, por exemplo, em um grupo de cabeçalho de tabela:
label { display: table-header-group; }e o campo de entrada para um grupo de linha de tabela:
input { display: table-row-group; }Em combinação com nosso seletor adjacente , terminamos e parece certo:
input:focus + label { color:red; font-weight: bold; }Portanto, nenhum script jQuery é necessário para dominar essa tarefa.
Para uma demonstração, consulte este Fiddle
HTH