为什么我需要单击以更改焦点以更新元素CSS

Question

I have a checkbox on my page that I've created custom error control CSS attributes for (similar to has-error & has-success):

.has-checkbox-error {
    outline-width: 1px;
    outline-style: solid;
    outline-color: #a94442 !important;
}

.has-checkbox-success {
    outline-width: 1px;
    outline-style: solid;
    outline-color: #3c763d !important;
}

Here is the HTML for the actual element on the page:

        <div class="checkbox" id="div_terms">
            <div id="input_terms">
                <input type="checkbox" class="form-control" id="terms" name="terms" />
              <p id="terms_p">By checking this box, you agree to the <a id="terms_a" href-"https://www.twfbl.com/joomla30/league-info/league-rules" target="_blank">League Rules</a> and note that they are subject
                to change at any time.  You agree to abide by all league rules.</p>
            </div>
        </div>

When the checkbox value is changed, it runs the following jQuery:

jQuery("#terms").on("change", function() {
    if(jQuery("#terms").prop("checked")) {
        jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
        jQuery("#terms").addClass("has-checkbox-success has-feedback");
        jQuery("#input_terms").prop("title", "");
    } else {
        jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback");
        jQuery("#terms").addClass("has-checkbox-error has-feedback");
        jQuery("#input_terms").prop("title", "Required.  You MUST agree to terms in order to join the league.");
    }
})

However, when it executes on the page the colorization does not change until you click somewhere else on the page? See https://www.twfbl.com/joomla30/registration-form to see what I mean.

I tried to dynamically change focus in the code (using jQuery["#terms_p"}.focus()), but it did not react the same as clicking on the page.

Any insight would be greatly appreciated.

Answer 1

 jQuery("#terms").on("change", function() { if(jQuery("#terms").prop("checked")) { jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback"); jQuery("#terms").addClass("has-checkbox-success has-feedback"); jQuery("#input_terms").prop("title", ""); } else { jQuery("#terms").removeClass("has-checkbox-success has-checkbox-error has-feedback"); jQuery("#terms").addClass("has-checkbox-error has-feedback"); jQuery("#input_terms").prop("title", "Required. You MUST agree to terms in order to join the league."); } }) 

 .has-checkbox-error { outline-width: 1px; outline-style: solid; outline-color: #a94442 !important; } .has-checkbox-success { outline-width: 1px; outline-style: solid; outline-color: #3c763d !important; } .has-checkbox-success:focus { outline-width: 1px; outline-style: solid; outline-color: #ffcc00 !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="checkbox" id="div_terms"> <div id="input_terms"> <input type="checkbox" class="form-control" id="terms" name="terms" /> <p id="terms_p">By checking this box, you agree to the <a id="terms_a" href-"https://www.twfbl.com/joomla30/league-info/league-rules" target="_blank">League Rules</a> and note that they are subject to change at any time. You agree to abide by all league rules.</p> </div> </div> 

You shouldn't focus the checkbox as you can see, if you remove .has-checkbox-success:focus from the code above, it works fine.

The border of the checkbox in the page you posted is white or maybe set to none, check your css rules.

EDIT:

troubling css

This is the css that's giving you trouble.