Question

我想要一个文本字段，我可以在其中插入文本，当我输入文本时，应该在文本字段的末尾出现一个按钮来清除文本。但我希望这只有HTML / Less，所以没有任何JS。

正如您在下面的代码中看到的，我使用了display: none属性，并且我希望在输入字段中输入文本后将display: none更改为display: block。

以下代码：

                    <div class="input-field">
                    <input name="{{field.name}}" ng-model="field.value" type="text"/>

                    <button class="icon-assistant8 ci-cancel" type="reset">
                    </button>

                </div>

这是相关的Less文件：

 .icon-assistant8 {
    position: absolute;
    right: 3px;
    top: 5px;
    width: 20px;
    height: 20px;
    display: none;
}

.icon-assistant8:after {
    display: block;
}

编辑：在这个例子之后https://codepen.io/shidhincr/pen/ICLBD我知道只用HTML和CSS就可以做到这一点。我也想这样做，但我不能让它工作，我不知道为什么。

此外，我知道我可以用JS做到这一点，我只是做得好，我做错了。

Answer 1

他们在您自己的解决方案中未实现的the example you've linked to关键部分

.search-box:not(:valid) ~ .close-icon {
    display: none;
}

<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />

要使:not(:valid)匹配，您需要输入中的required属性。当输入为空时，它被认为无效。

这是一个基本的例子

＆＃13;

input:not(:valid) ~ button { display: none; }

＆＃13;

<input type="text" required>
<button type="button">Foo</button>

＆＃13;

在纯HTML / LESS中输入文本时显示按钮

1 个答案: