show button when text is entered in pure HTML/LESS - html

Question

I want a text field where i can insert text into and when i enter the text there should appear a button on the end of the textfield to clear the text. But I want this with only HTML/Less so without any JS.
As you can see in the code below I used the display: none attribute and i want to change the display: none to display: block after there is text entered in the input field.
code below:
<div class="input-field">
<input name="{{field.name}}" ng-model="field.value" type="text"/>
<button class="icon-assistant8 ci-cancel" type="reset">
</button>
</div>
And this is the relevant Less file:
.icon-assistant8 {
position: absolute;
right: 3px;
top: 5px;
width: 20px;
height: 20px;
display: none;
}
.icon-assistant8:after {
display: block;
}
Edit: After this example https://codepen.io/shidhincr/pen/ICLBD I know it is possible to do it with only HTML and CSS. I want to do that too but I can't get it to work and I do not know why.
Also I know I can do this with JS, I am just courious what i'm doing wrong.

Answer 1

They key parts of the example you've linked to that you haven't implemented in your own solution are
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
In order for :not(:valid) to match, you need the required attribute on the input. When the input is empty, it's considered not valid.
Here's a basic example
input:not(:valid) ~ button { display: none; }
<input type="text" required>
<button type="button">Foo</button>