I want to show a label when select element is clicked on (change opacity and location by a few px)
Here's how I do it with a normal form input. THIS WORKS.
$(".lead_field-label.is-focus").removeClass("is-focus");
$(".lead_text-field").on("focusin", function () {
$(this).siblings(".lead_field-label").addClass("is-focus");
});
$(".lead_text-field").on("focusout", function () {
if ($(this).val() === "") {
$(this).siblings(".lead_field-label").removeClass("is-focus");
}
if ($(this).val() !== "") {
$(this).siblings(".lead_field-label").addClass("is-focus");
}
});
This is for a select input, and this doesn't work:
$(".lead_field-label-select.is-focus-select").removeClass("is-focus-select");
$("select").focus(function() {
$(this).siblings(".lead_field-label-select").addClass("is-focus-select");
});
$("select").on("focusout", function () {
if ($(this).val() === "") {
$(this).siblings(".lead_field-label-select").removeClass("is-focus-select");
}
if ($(this).val() !== "") {
$(this).siblings(".lead_field-label-select").addClass("is-focus-select");
}
});
I tried to target a class (.select), an ID, and a ton of other stuff too. Nothing seems to work. Any solutions?