Truly hidden clear icon when using -webkit-search-cancel-button

Question

Implemented a clear button using -webkit-search-cancel-button following the next post:

https://stackoverflow.com/a/64267916/1065145

The problem with the implementation referenced above is that it renders the clear icon invisible when out of focus, but it still occupies space and it doesn't look nice at all:

It can be either a long placeholder on a small device or a long user query:

Trying to solve it with display: none doesn't really work, because it still renders invisible when the input is in focus, but there is no user input yet and only the placeholder is shown (and part of it is eaten by the invisible icon).

Q. Is there a way to make icon truly invisible so it is shown only on two conditions:

1. The input is in focus.
2. User has provided some input and the placeholder is gone.

Answer 1

display: none; and display: block; worked for me (the newest Chrome). It it necessary to add dispay block when in focus (input[type="search"]:focus::-webkit-search-cancel-button).

If it still not working, try with !important. Sometimes browser style is harder to override. (I'm not recommending using !important, but sometimes there is no other way).

if you want show clear button even with no tekst provided by user add:

input[type="search"]::-webkit-search-cancel-button {
    opacity: 1 !important;
}

input[type="search"] {
  border: 1px solid gray;
  padding: .2em .4em;
  border-radius: .2em;
}

input[type="search"].dark {
  background: #222;
  color: #fff;
}

input[type="search"].light {
  background: #fff;
  color: #222;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  margin-left: .5em;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  display: none;
  pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  display: block;
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

<input type="search" placeholder="search" class="light">
<input type="search" placeholder="search" class="dark">

---

Edited:

I manage to do it, like you wanted.

I used: https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

I also left outline borders for better understanding.

input[type="search"] {
  border: 1px solid gray;
  padding: .2em .4em;
  border-radius: .2em;
}

input[type="search"].dark {
  background: #222;
  color: #fff;
}

input[type="search"].light {
  background: #fff;
  color: #222;
}
input[type="search"]::-webkit-textfield-decoration-container {
  width: 100%;
}

/* normal state, with placeholder and no value */
input[type="search"]:placeholder-shown::-webkit-textfield-decoration-container {
  outline: 1px dotted yellow;
}

/* focused state, with placeholder and no value */
input[type="search"]:placeholder-shown:focus::-webkit-textfield-decoration-container {
  outline: 1px dotted red;
}

/* focused state, with value */
input[type="search"]:not(:placeholder-shown):focus::-webkit-textfield-decoration-container {
  outline: 1px dotted green;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 0;
  border-radius: 50em;
  background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
  background-size: contain;
  pointer-events: none;
}
input[type="search"]:not(:placeholder-shown):focus::-webkit-search-cancel-button {
  display: block;
  width: 1em;
  margin-left: .5em;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

<input type="search" placeholder="search search search search search search" class="light">
<input type="search" placeholder="search search search search search search" class="dark">