CODEWITHSUNDEEP
jquerycss
Jaqen H'ghar
Jaqen H'ghar

Reputation: 1879

Change color for a label which does not have 'Id'

I want to change text color for a label element which does not have 'ID'. I cannot edit the HTML but I can provide JQuery or can update the CSS class. I am doing this on a portal whose instance I'm customizing as per our look and feel needs, and it does not offer a way to edit HTML, but let the user update jquery and CSS.

Check box and label for checkbox are placed in a div, as follows. I tried adding "color: white" in 'loginbx' class but it didn't work. Could you please suggest how could this be done using jquery?

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

Any help is really appreciated.

Thank you.

Upvotes: 0

Views: 291

Answers (2)

ikiK
ikiK

Reputation: 6532

CSS:

#showPwd + label {
    color: red;
}
<div class="loginbx">
    <input type="checkbox" id="showPwd">
    <label for="showPwd">
        Show Password
    </label>
</div>
OR 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>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115045

It may not have an ID but it does have a singular attribute - for which you target.

label[for="showPwd"] {
  color: red;
}
<div class="loginbx">
  <input type="checkbox" id="showPwd">
  <label for="showPwd">
        Show Password
    </label>
</div>

Upvotes: 2

Related Questions