如何在 CSS 中为焦点设置不同的颜色，一种为有效，一种为无效

Question

如果值有效和无效，我想要两种不同的颜色。 ym 是年月值= yyyymm 手数是 1 到 5 之间的数字如果 ym 值为 null，则我们不能为地块赋值。这就是代码。

function validate() 
{  
   if(document.myform.ym.value.length=="")
   {
     document.myform.ym.focus();
   }
   if(document.myform.ym.value.length!=6)
   {   
     document.myform.ym.focus();
     document.getElementById("lot").value=null;
   }  
}

Answer 1

对于无效和有效的样式，就像:valid和:invalid一样简单。您可以设置自己的模式来获取样式以了解什么是有效的，什么是无效的。

input:valid {
background:green;
}

input:invalid {
background:red;
}

<input type='text' pattern='[0-9]{6}' maxlength='6' placeholder='yyyymm'>

Answer 2

Use of pattern='\d{4}[/]\d{2}'

A)

input[type="text"]:valid {
  border: 2px solid green;
} 

input[type="text"]:invalid {
  border: 2px solid red;
}

<input type='text' pattern='\d{4}[/]\d{2}' placeholder='yyyymm'>

B)

input[type="text"]:valid + span:after{
  content: '14';
  color: green;
} 

input[type="text"]:invalid + span:after {
  content: '18';
  color: red;
}

<input type='text' pattern='\d{4}[/]\d{2}' placeholder='yyyymm'> <span></span>

如何在 CSS 中为焦点设置不同的颜色，一种为有效，一种为无效

How to set different color in CSS for focus one for valid and one for invalid

javascript

css

focus