[英]Changing color of input type date on valid input
So for my regular input type="text" field I use the following code to change the color to green, only after something has been typed in and it is valid:因此,对于我的常规输入 type="text" 字段,我使用以下代码将颜色更改为绿色,只有在输入内容并且它有效之后:
input[type="text"]:not(:placeholder-shown):valid {
background-color: green;
}
Is there any way to the same for an input type="date" field?输入 type="date" 字段有什么相同的方法吗?
<input type="date" class="form-control calender-black" name="dbfield52">
The problem seems to be it already is valid since it shows: DD-MM-YYYY as standard value.问题似乎是它已经有效,因为它显示:DD-MM-YYYY 作为标准值。
Is there a way to do this with css only selectors?有没有办法只使用 css 选择器来做到这一点? Or else maybe with javascript.
或者可能使用 javascript。
You can do this easily using :valid
css pseudo-class like:您可以使用
:valid
css 伪类轻松做到这一点,例如:
input[type="date"]:valid {
border: 2px solid green;
}
Demo:演示:
( Just select a value from control and it will add a green border to the date control ) (只是 select 来自控件的值,它将为日期控件添加绿色边框)
/* This is just used to set some styling */ input[type="date"] { padding: .375rem.75rem;font-size: 1rem;line-height: 1.5;border-radius: .25rem;border: 2px solid #ced4da; } input[type="date"]:focus { outline: 0; } /* This is the important part */ input[type="date"]:valid { border: 2px solid green; }
<form> <input type="date" class="form-control calender-black" name="dbfield52" required /><br/> <p> <button>Submit</button> </p> </form>
You have to set the input as required
in order for validation to work:您必须根据
required
设置输入才能进行验证:
input[type="date"]:valid { background-color: green; }
<input type="date" class="form-control calender-black" name="dbfield52" required>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.