Reimplement "clear" button for search (and other?) inputs

[jthrilly]

Our normalize CSS removes a non-standard (but useful) feature - a small "clear" button in the corner of search inputs.

I think that given we are targeting touch screen data entry it would be very convenient for users to have this back. It seems to work in Chrome and iOS, so no compatibility issues beyond the fact this is not in any kind of specification.

I did some testing, and using the following sass:

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now add custom styles */
  height: 1rem;
  width: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:currentColor;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EClose%3C/title%3E%3Cg id='Close'%3E%3Crect class='cls-1' x='18' y='-6.28' width='4' height='52.57' transform='translate(-8.28 20) rotate(-45)' /%3E%3Crect class='cls-1' x='18' y='-6.28' width='4' height='52.57' transform='translate(20 48.28) rotate(-135)' /%3E%3C/g%3E%3C/svg%3E");
}

Results in this:

This is fine, but it doesn't work with dark backgrounds. We might need to implement some modifier classes (maybe at the level of .form-field-component) to account for this.

Side issue

It might be nice to have something similar for our other input types. Something like the below?