Change CSS of Element on Focus Out

Question

So I am having trouble with a bit of jQuery that I am trying to use to style an input. Essentially, I want to be able to check if the input is empty after it goes out of focus and then change the CSS of that input based on this information. Here is my current code:

$(".text-input").focusout(function () {
  if ($(".text-input").val()) {
    $(".card").css({
      bottom: "35px",
      "font-size": "0.9em"
    });
  }
});

I do not typically use jQuery so forgive the poor syntax. This bit of code is part of a larger project I am working on trying to copy Google's input animations using CSS. Sadly I didn't see a way around using jQuery to make sure that the labels don't cover the input values after they are filled in. Here is a link to the Codepen so you can see what I'm talking about. Just type anything in one of the top three inputs then click one something else. You will notice that the label goes back to covering the input space.

Answer 1

Instead of selecting elements using class name inside particular on (click/focus..) methods, try to use with this keyword.

$(".text-input").focusout(function () {
    if ($(this).val()) {
        $(this).siblings('label').css({
            "bottom": "35px",
            "font-size": "0.9em"
        });
    } else {
        $(this).siblings("label").css({
            "bottom": "0",
            "font-size": "1.3em"
        });
    }
});

To get the CSS color code variable from script,

let styleVar = getComputedStyle(document.documentElement);

var blueColor = styleVar.getPropertyValue("--blue"); // 0000FF