html - 使用 CSS 检查输入是否有文本/值

Question

我环顾四周，但只能找到 JS 解决方案。

有没有办法用 CSS 检测输入是否输入了任何文本？

我做的基本上是这样的(删掉这道题不相关的代码):

 .search-form input[type="text"] {
    width: 0 !important;
}
.search-form input[type="text"]:focus {
    width: 100% !important;
}

本质上，单击标签会将输入扩展到页面宽度的 100%。这工作正常，但是当您输入文本并单击输入时，它会收缩回 width:0 - 因此隐藏了输入的文本。有没有办法用 CSS 来防止这种行为并将其保持在 width:100% 就像当输入是 :focus 时输入文本一样？

Answer 1

尝试将“required”属性添加到 HTML 中的文本字段，然后将其添加到 CSS:

.search-form input[type="text"]:valid {
    width: 100% !important;
}

不过，我可能会尽量避免所有这些 !importants。