检查输入是否有带有 CSS 的文本/值答案

【问题标题】：Check if input has text/value with CSS检查输入是否有带有 CSS 的文本/值
【发布时间】：2014-05-22 21:05:35
【问题描述】：

我环顾了一下，但只能找到 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 时输入的文本一样？

【问题讨论】：

你不能用JS有什么原因吗？
请给我们Fiddle，以便我们为您提供更多帮助
很确定你需要 JS，CSS 使用逻辑或有条件，所以如果没有，我看不到任何这样做的方法。
@KM123，不是真的，我只是想找出最轻量级的选项，并认为可能有某种选择器或解决方法。还是谢谢。
我会认真考虑使用像 jQuery 这样的轻量级框架。你想让我为你提供实现你想要的代码吗？

标签： html css input

【解决方案1】：

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

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

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

【讨论】：

我认为这可行，并在您发布后构建了a fiddle 进行尝试。
这简直太美了！
如果你想提交表单和元素必须是可选的怎么办？这将不起作用...（jQuery 验证不提交表单...）

【解决方案2】：

不确定它是否适用于您的特定用例，但您可以使用 contenteditable 使用虚假输入来实现效果

Working Example

 .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>

【讨论】：