フィールド入力後の色の変更 - CSS

Question

塗りつぶしたフィールドをすべて強調表示するためのCSSプロパティはありますか？ちょうど私たちが持っているように、フォーカスCSSのプロパティ。

input[type="text"] { 
 
    background-color: white; 
 
} 
 
input[type="text"]:focus { 
 
    background-color: red; 
 
}

<input type="text">

私は、フィールド内の何かがあるときに、フィールドの背景色が緑色にしたいです。これはCSSで可能ですか？ CSSでない場合、他の方法はありますか？

Answer 1

確かにこれはjavascriptで実現できます。

<input>フィールドのいずれかにフォーカスが移動した後、以下のスクリプトはkeyupをリッスンします。

次に、<input>フィールドが空であるかどうかを確認します。

そうでない場合は、<input>フィールドの背景が緑色に変わります。

var inputs = document.querySelectorAll('input[type="text"]'); 
 

 
function detectContent() { 
 
    if (this.value !== '') { 
 
     this.style.backgroundColor = 'green'; 
 
     this.style.color = 'white'; 
 
    } else { 
 
     this.style.backgroundColor = 'white'; 
 
     this.style.color = 'black'; 
 
    } 
 
} 
 

 

 
for (var i = 0; i < inputs.length; i++) { 
 
    var input = inputs[i]; 
 
    input.addEventListener('keyup', detectContent, false); 
 
}

<input type="text" /> 
 

 
<input type="text" /> 
 

 
<input type="text" />

Answer 2

これを行いCSSにはセレクタがありません

$(document).ready(function() { 
 
    $(':input').on('input', function() { 
 
    if (this.value.length > 0) { 
 
     $(this).css('background-color', 'green'); 
 
    } else { 
 
     $(this).css('background-color', ''); 
 
    } 
 
    }); 
 
});

input[type="text"] { 
 
    background-color: white; 
 
    color: #fff; 
 
} 
 
input[type="text"]:focus { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text"> 
 
<input type="text"> 
 
<input type="text"> 
 
<input type="text">