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

尝试添加＆＃34;必需＆＃34;属性到HTML中的文本字段，然后将其添加到CSS：

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

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

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

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

2 个答案: