Is there some easy way how to change placeholder color by jQuery

Question

I would like to change placeholder color by using jQuery because I want to paralyze one input.

All inputs have transparent color after focus via CSS:

:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent;
}
:focus::-moz-placeholder { /* Firefox 19+ */
    color: transparent;
}
:focus:-ms-input-placeholder { /* IE 10+ */
    color: transparent;
}
:focus:-moz-placeholder { /* Firefox 18- */
    color: transparent;
}

I tried for example this way, but nothing happened:

inputSelectSubCat.on('mousedown', function() {
   event.preventDefault();
})

But it also paralyze blur and focusin event for this input element.

PS: I read similar topics, but there are not very nice solutions for this problem. I think that must be something more easier then create element.

No, I already checked this answers before I wrote this question. — Dump, Dec 05 '22 at 19:42

score -1 · Answer 1 · answered Dec 05 '22 at 18:45

You can use a variable and change its value with style.setProperty method.

For example.

input {
  --placeholder-color: transparent
}
input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var(--placeholder-color);
}
input:focus::-moz-placeholder { /* Firefox 19+ */
    color: var(--placeholder-color);
}
input:focus:-ms-input-placeholder { /* IE 10+ */
    color: var(--placeholder-color);
}
input:focus:-moz-placeholder { /* Firefox 18- */
    color: var(--placeholder-color);
}

const input = document.querySelector('.input-class');
input.style.setProperty('--placeholder-color', '#333');

We have many duplicates of this question, please don't answer such frequently asked questions. — Heretic Monkey, Dec 05 '22 at 18:48

Is there some easy way how to change placeholder color by jQuery

1 Answers1