javascript - Selecting Pseudo Element :focus and :active via JS -

i can't seem pseudo slement select workaround work on :focus styled form text box want change via js function.

i know it's matter of adding class, , i've seen examples :after , :before not :focus, , not sure add class

js:

$(document).ready(function() {                 function night() {               var currenttime = new date().gethours();               if (0 <= currenttime&&currenttime < 5) {                 $('.text_box').css('text-shadow', '0 0 0 #272727');                 $('.text_box:focus').css('background-color', '0 0 0 #fff');             }               if (10 <= currenttime&&currenttime <= 24) {                 $('.text_box').css('text-shadow', '0 0 0 #fff');                 $('.text_box:focus').css('background-color', '0 0 0 #272727');             }             }          night();                     }); 

ccs:

.text_box {     width:350px;     height: 80px;     color: transparent;     text-shadow: 0 0 0 #fff;     text-align:left;     font-size: 4.2em;     padding-top: 25px;     padding-left: 15px;     padding-bottom: 10px;     outline:none;     background-color:transparent;     cursor: text;     float:inherit;     display:inline block;     position:relative;     -webkit-appearance: none;     -webkit-border-radius: 0;     letter-spacing: 1px;     -webkit-transition:.5s ease;     -moz-transition:.5s ease;     -o-transition:.5s ease;     -ms-transition:.5s ease;     transition:.5s ease } .text_box:focus {     background-color: #fff;     color: transparent;     text-shadow: 0 0 0 #272727;     -webkit-transition:.5s ease;     -moz-transition:.5s ease;     -o-transition:.5s ease;     -ms-transition:.5s ease;     transition:.5s ease;     -moz-box-shadow: 0 0 1em #fff;     -webkit-box-shadow: 0 0 1em #fff;     -webkit-animation-name:boxpulse; } 

just add css class javascript when code decides should so

document.getelementbyid('day').addeventlistener('click', function() {    addclasses('day', 'night');  });    document.getelementbyid('night').addeventlistener('click', function() {    addclasses('night', 'day');  })    function addclasses(add, remove) {    var buttons = document.getelementsbytagname('input');    (var = 0; < buttons.length; i++) {      buttons[i].classlist.add(add);      buttons[i].classlist.remove(remove);    }    buttons[0].focus();  }    $(document).ready(function() {    var currenttime = new date().gethours();    if (currenttime > 20 || (0 <= currenttime && currenttime < 5)) {      addclasses('night', 'day');    } else {      addclasses('day', 'night');      }  });

.day:focus {    background-color: #ddd;    color: red;  }  .night:focus {    background-color: black;    color: yellow;  }  :focus {    text-shadow: 0 0 0 #272727;    -webkit-transition: .5s ease;    -moz-transition: .5s ease;    -o-transition: .5s ease;    -ms-transition: .5s ease;    transition: .5s ease;    -moz-box-shadow: 0 0 1em #fff;    -webkit-box-shadow: 0 0 1em #fff;    -webkit-animation-name: boxpulse;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="text" placeholder="name" value="some name" />  <br>  <input type="text" placeholder="last name" value="last name" />      <button id='day'>make day</button>  <button id='night'>make night</button>