<form style="width: 300px; margin: 100px">
<input type="text" placeholder="placeholder" />
<button type="reset">×</button>
</form>
form {
display: flex;
position: relative;
input {
width: 100%;
outline: none;
}
button[type="reset"] {
position: absolute;
border: 0;
right: 0;
outline: none;
background: transparent;
}
input:not(:placeholder-shown) ~ button[type="reset"] {
display: block;
}
input:placeholder-shown ~ button[type="reset"] {
display: none;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.