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

我环顾了一下，但只能找到JS解决方案

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

我所做的基本上是这样的（去掉这个问题的无关代码）：

基本上，单击标签会将输入扩展到页面宽度的100%。这很好，但当您输入文本并单击关闭输入时，它会收缩回宽度：0-因此隐藏输入的文本。CSS是否有办法防止这种行为，并将其保持在

宽度：100%

像输入

时那样：当有文本输入时，聚焦
？
尝试将“必需”属性添加到HTML的文本字段中，然后将其添加到CSS中：

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

我可能会尽量避免这些！但是很重要。
不确定它是否适用于您的特定用例，但是您可以通过使用


 .fakeInput {
     border: 1px solid red;
     display:inline;
     padding:2px; /* optional */
 }
 .fakeInput:focus {
     display:block;
     border: 2px solid blue;
     width:100%;
     height:1em;
 }

<div class="search-form">
    <div class="fakeInput" contenteditable="true"></div>
</div>

.fakeInput{
边框：1px纯红；
显示：内联；
填充：2px；/*可选*/
}
.fakeInput：聚焦{
显示：块；
边框：2件纯蓝；
宽度：100%；
高度：1米；
}
有什么理由不能使用JS吗？请给我们一个答案，这样我们可以帮助您更清楚地确定您需要JS，CSS使用逻辑或条件，否则我看不到任何方法。@KM123，不，不是真的，我只是想找出最轻量级的选项，并认为可能会有一些选择器或解决方法。无论如何，谢谢。我会认真考虑使用像JQuery这样的光框架。你想让我给你提供代码来实现你想要的吗？我在想这可能行得通，并在你发布后试用。这真是太漂亮了！如果您想提交表单，那么表单和元素必须是可选的？？这是行不通的。。。（jQuery验证不提交表单…）
 .fakeInput {
     border: 1px solid red;
     display:inline;
     padding:2px; /* optional */
 }
 .fakeInput:focus {
     display:block;
     border: 2px solid blue;
     width:100%;
     height:1em;
 }

<div class="search-form">
    <div class="fakeInput" contenteditable="true"></div>
</div>