字段为空时限制提交按钮的css代码答案

【问题标题】：Css code for restricting submit button when fields are blank字段为空时限制提交按钮的css代码
【发布时间】：2021-12-19 12:31:36
【问题描述】：

如果字段为空，我需要 CSS 代码来限制提交按钮。每天我们都会通过 WordPress 登录页面提交按钮收到 3-5 个空白查询。

如果有的话，这些 CSS 代码应该放在哪里。

谢谢

【问题讨论】：

嗯，首先，通常这些事情是在 javascript 中完成的，而不是在 CSS 中。但是，根据表单的确切 (html) 结构，可能（仅在某些情况下）可以在 CSS 中隐藏提交按钮（而文本框 value=""）。 -- 通常更好的方法（除了javascript）是过滤提交服务器端在PHP例如。
谢谢。我想知道我们是否也可以在 CSS 中做到这一点
不太可能，但是如果text 输入和submit 输入恰好是html 代码中的兄弟姐妹，那么可以使用css + 选择器。

标签： css submit-button

【解决方案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>

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

【讨论】：