Editing input type=“search” Pseudo-element Button ('x')

Question

I\'m trying to make a search bar that will look nice. What I did is, I made an image of an search bar and I\'m adding the image to the back-ground of the input and I\'m edit

Answer 1

2020 Cross-browser consistent approach

Here is a cross-browser implementation of the Clear Search "x" button, It uses the solid times-circle SVG from FontAwesome for the icon and works for both dark and light backgrounds. It also standardizes Safari to adopt the Chrome implementation to only show the icon when the form field has focus.

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;
  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;
  opacity: 0;
  pointer-events: none;
}

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

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

NB. Though Edge is also webkit based and currently supports some modifications with the ::-webkit-search-cancel-button pseudo-class, my findings show that as soon as you set a background image using the url() syntax in css, the button disappears in Edge. For this reason, the above solution currently does not work in Edge.