Question

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

Answer 1

尝试这样的事情：

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

这假设两个输入字段和按钮是直接兄弟。

Answer 2

你的问题不明确。但是我试着回答

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

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>

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

2 个答案: