Измените цвет метки, у которой нет идентификатора

Question

Я хочу изменить цвет текста для элемента метки, у которого нет идентификатора. Я не могу редактировать HTML, но могу указать JQuery или обновить класс CSS. Я делаю это на портале, экземпляр которого я настраиваю в соответствии с нашими потребностями внешнего вида, и он не предлагает способ редактировать HTML, но позволяет пользователю обновлять jquery и CSS.

Флажок и метка для флажка помещаются в div следующим образом. Я попытался добавить «color: white» в класс «loginbx», но это не сработало. Не могли бы вы подсказать, как это можно сделать, используя jquery?

<div class="loginbx">
    <input type="checkbox" id="showPwd">
    <label for="showPwd">
        Show Password
    </label>
</div>

Любая помощь очень ценится.

Спасибо.

Answer 1

У него может не быть идентификатора, но у него есть единственный атрибут - for, на который вы нацеливаетесь.

label[for="showPwd"] {
  color: red;
}

<div class="loginbx">
  <input type="checkbox" id="showPwd">
  <label for="showPwd">
        Show Password
    </label>
</div>

Answer 2

CSS:

#showPwd + label {
    color: red;
}

<div class="loginbx">
    <input type="checkbox" id="showPwd">
    <label for="showPwd">
        Show Password
    </label>
</div>

ИЛИ jQuery:

$( "#showPwd" ).next().css( "color", "red" );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loginbx">
    <input type="checkbox" id="showPwd">
    <label for="showPwd">
        Show Password
    </label>
</div>