CODEWITHSUNDEEP
javascriptcss
ryanjohnsond
ryanjohnsond

Reputation: 513

How to Hide ":before" Psuedo selector with JavaScript

Does anyone know how to hide the CSS ':before' pseudo selector with JavaScript? I have two arrows I use that point to an invalide input field. The arrows are made with unicode and are displayed with the ":before" pseudo selector. For some reason they are being displayed when the page loads. They should be inheriting from the JavaScript "display = 'none';" They should be hidden, but the arrows are still showing up.

JsFiddle Code Sample: http://jsfiddle.net/ryanjohnsond/nyytwqmy/2/

This class ".error-text-login:before {}" is not receiving the JavaScript command "display = 'none';

.error-text-login:before {
 content: '\0020 \21E1 \0020';
  vertical-align: bottom; 
 }


 else if (pswd != "" || lenPswd.length > 0){
 document.getElementById('passwordLogin').className = 'default';
 document.getElementById('pswd-error').innerHTML = "";
 document.getElementById('pswd-error').style.display = "none";
 }

Upvotes: 2

Views: 1672

Answers (1)

Krzysiek
Krzysiek

Reputation: 2495

You have to use css

CSS:

.hide-before:before {
    display: none !important;
}

JS:

pswd-error.className += ' hide-before';

Upvotes: 6

Related Questions