以纯HTML/LESS格式输入文本时显示按钮

我想要一个文本字段，我可以在其中插入文本，当我输入文本时，应该在文本字段的末尾显示一个按钮以清除文本。但我希望这个只有HTML/更少，所以没有任何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>

编辑：在这个例子之后，我知道只使用HTML和CSS是可能的。我也想这样做，但我不能让它工作，我不知道为什么

我也知道我可以用JS来做这件事，我只是很清楚我做错了什么。

它们是您在自己的解决方案中没有实现的关键部分

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

Foo

既然您使用的是angular，为什么不使用angular呢？您已经在使用JavaScript了。。。你所描述的是行为，行为是通过JavaScript改变的。@reinierkors我知道我可以用angular实现这一点。但我只是想知道是否有可能只使用html和css。我看到它可以与html和css一起工作。@AndréDion我链接到一个页面，他们只使用html和css（在编辑中）我知道这是可能的，但我做得不对，这基本上是我的问题。为什么它对我不起作用。

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

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