basti1012.bplaced.net

Bei der Nutzung von "Pattern" in einem Input-Feld kann ich mit valid/invalid z.B. die Textfarbe auf grün/rot stellen. Ein leeres Feld wird scheinbar automatisch als valid interpretiert. Gibt es eine Möglichkeit das leere Feld z.B auf schwarz zu stellen?

Code

                                    
                                <style>
  input{
  margin:0;
  padding:0;
  outline:none;
  height:30px;
  width:200px;
}
input:placeholder-shown {
  border: 5px solid red;
  background:black;
}
</style>
<input type="text" placeholder=" ">
<div id="info"></div>
<script>
  
  /* dient nur für die Zeichen länge auszulesen */
inp=document.getElementsByTagName('input')[0];
inf=document.getElementById('info');
inf.innerHTML='Zeichen in Input Feld = <strong>'+inp.value.length+'</strong>';
inp.addEventListener('keyup',function(){
  inf.innerHTML='Zeichen in Input Feld = <strong>'+inp.value.length+'</strong>';
})
      
</script>