Selecting Pseudo Element :focus and :active via JS

Question

I can't seem to get the pseudo slement select workaround to work on :focus for a styled form text box that I want to change via a JS Function.

I know it's matter of adding a class, and I've seen examples for :after and :before but not :focus, and am not sure where to add the 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; }

Answer 1

Just add a CSS class from JavaScript when your code decides it should do 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');
  for (var i = 0; i < 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>

Answer 2

I actually found a great solution for this. I've read some tutorials for selecting pseudo elements :after and :before on here but had never seen something that worked properly for :focus and :active.

My problem: I wanted to have different CSS for certain elements on the page based on the time of day but without switching out the entire stylesheet. (It's a simple site and that felt sloppy to me). I used: $('.text_box').css('text-shadow', '0 0 0 #272727'); to adjust the CSS elements but ran into a snag when I was trying to adjust the styled pseudo elements.

To make it word I used the addRule method, which allowed me to adjust the CSS in the the time-sensitive CSS JS script that I had put together.

(function($) {
            window.addRule = function(selector, styles, sheet) {
                if (typeof styles !== "string") {
                    var clone = "";
                    for (var style in styles) {
                        var val = styles[style];
                        style = style.replace(/([A-Z])/g, "-$1").toLowerCase(); 
                        clone += style + ":" + (style === "content" ? '"' + val + '"' : val) + "; ";
                    }
                    styles = clone;
                }
                sheet = sheet || document.styleSheets[0];
                if (sheet.insertRule) sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules
                    .length);
                else if (sheet.addRule) sheet.addRule(selector, styles);
                return this;
            };
            if ($) {
                $.fn.addRule = function(styles, sheet) {
                    addRule(this.selector, styles, sheet);
                    return this;
                };
            }
        }(window.jQuery));
        $(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").addRule("background-color: #272727");
                    $(".text_box:focus").addRule("color: #FFF");
                    $(".text_box:focus").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".text_box:focus").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                    $("#mc-embedded-subscribe").addRule("color: #272727;");
                    $(".submit_box:hover").addRule("background-color:#272727 !important;");
                    $(".submit_box:hover").addRule("color:#FFF !important;");
                    $(".submit_box:hover").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".submit_box:hover").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                }
                if (20 <= currentTime && currentTime <= 24) {
                    $('.text_box').css('text-shadow', '0 0 0 #272727');
                    $(".text_box:focus").addRule("background-color: #272727");
                    $(".text_box:focus").addRule("color: #FFF");
                    $(".text_box:focus").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".text_box:focus").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                    $("#mc-embedded-subscribe").addRule("color: #272727;");
                    $(".submit_box:hover").addRule("background-color:#272727 !important;");
                    $(".submit_box:hover").addRule("color:#FFF !important;");
                    $(".submit_box:hover").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".submit_box:hover").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                }
            }
            night();
        });

This worked great, though I am wondering if there is an even easier workaround? This was a lot simpler+cleaner then adding new classes to the existing elements that contain :active or :focus -- though I don't think that would work properly in this case.

Answer 3

No jquery is required although it does have a cool effect, no classes are required either though. Try this:

:focus {
    background-color:green;
}

<input type="text" placeholder="name" /><br>
<input type="text" placeholder="last name" />

Or some combination inbetween.