检查输入是否具有CSS的文本/值

Question

我看了一下,但只能找到JS解决方案.

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

我正在做的基本上就是这个(删除这个问题的无关代码):

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

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

Answer 1

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

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

我可能会尽量避免所有这些!重要的事情.