textareaやinput内の一部の色をクラスを変えて再現する挙動

前提・実現したいこと

WordpressのContact form7にてお問い合わせフォームを作成中です。
それ自体はいいのですが、デザイン上でplaceholder内に必須マーク（※）があり、これの色だけが違うという状態で再現に手間取っています。
placeholderの色を一部だけ変えるというのがCSS上で無理だったため、ｊｓにて挑戦中なのですがうまくいきません

解決策を模索して、擬似的にcssの疑似要素で「※」を入れていまして(label要素にrelativeを入れabsoluteで位置を調整しています。）
文字が入力されることでhissuクラスをとり、文字が入力されてない状態になるとまたhissuクラス付与、
入力ミス等で元の画面に戻された際、文字が入力済みの箇所があるとhissuクラスはとる
という挙動で考えています。

javascript
1
2$('.hissu').each(function () {
3var $this = $(this);
4$(this).find('.input').on('keypress', function () {
5	if ($(this).val()) {
6	$this.removeClass('.hissu');
7	} 
8	else {
9	$this.addClass('.hissu');
10	}
11});
12	if ($(this).val()) {
13	$this.removeClass('.hissu');
14	} 
15	else {
16	$this.addClass('.hissu');
17	}
18});

css
1.hissu::before{
2content: '※';
3position:absolute;
4top: 5px;
5left: 45px;
6color: #3377EE;
7}

html
1<label class="hissu"><input type="text" id="namae" name="namae" value="" placeholder="お名前"></label>

どなたかご教授願えればと思います。

行動規範の内容に同意します

回答2件

ベストアンサー

:invalid 疑似クラスを使って背景色を指定してみてはどうでしょうか？
required 属性追加。

HTML
1<input type="text" id="namae" name="namae" value="" placeholder="お名前" required="required" />

CSS
1.hissu::before {
2  content: '※';
3/*
4  position:absolute;
5  top: 5px;
6  left: 45px;
7*/
8  color: #3377EE;
9/* add */
10  display: inline-block;
11  width: 0;
12  overflow: visible;
13}
14
15.hissu input {
16  background: transparent;
17  border: 1px solid #999;
18}
19
20.hissu input:valid {
21  background: #fff;
22}
23
24.hissu input::placeholder {
25  text-indent: 1em;
26}