CSS：有效的选择器 - 通过使用一个按钮的两个元素的有效性仅有的CSS

Question

我有2个输入（用于电子邮件和电话）和一个按钮。我只想在输入[type =“tel”]：valid和input [type =“email”]：同时有效时使用按钮规则，但我无法正确执行此操作。有没有办法使用CSS做到这一点？

Answer 1

尝试这样：

input[type='tel']:valid ~ input[type='email']:valid ~ button { 
    color: green; 
} 

这假定两个输入框和按钮是直接的兄弟姐妹。

Answer 2

你的问题不清楚。但我试着回答

CSS： ：有效选择器通常位于用户输入数据的输入元素上，如果其有效类型，则显示css样式为：valid和css样式为：invalid如果无效。

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

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

该按钮通常用于提交表单。如果输入是表单元素的一部分，则浏览器在提交之前验证表单。您还可以在提交前使用javascript验证表单，方法是添加onsubmit =“return validateForm（）”。

<form action="demo_form.asp" method="post" **onsubmit="return validateForm()"**> 
    <input type="tel" name="telephone" required> 
    <input type="email" name="email" required> 
    <input type="submit" value="button"> 
</form>