当字段为空时限制提交按钮的Css代码

Question

我需要CSS代码限制提交按钮，如果字段是empty.Daily，我们收到3-5空白查询通过我们的WordPress登陆页面提交按钮。

在哪里放置这些CSS代码(如果有的话)。

谢谢

Answer 1

你真的应该用一个脚本来做这个，因为用CSS做这样的事情对你的表单结构的任何未来变化都非常敏感。它可以使用:placeholder-shown选择器使用CSS来完成。为此，需要向所有文本输入添加一个占位符。

​

/* As long as one of the selectors is matched, the button won't show. */
form input:placeholder-shown ~ button,
form textarea:placeholder-shown ~ button {
  display: none;
}

<form>
first name: <input type="text" name="firstname" placeholder="Enter first name"><br>
Last name: <input type="text" name="lastname" placeholder="Enter last name"><br>
Text area<br>
<textarea name="textarea" placeholder="Enter some text..."></textarea>
<br>
<button type="submit">Submit</button>
</form>

​

这是可行的，但是对于表单中的任何更改，您都需要确保它不会中断。我个人不会使用这个:)