Einstellungen für leeres Inputfeld bei Nutzung von Pattern
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?
Der hier verwendete 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>