nicer looking cancel / clear button on search input

There's a King Missile song "Take Stuff from Work" that starts

Take stuff from work

It's the best way to feel better about your job

Well, today I taking this little "clear/cancel search" icon button. When you have an input type="search" you get a little X icon to undo the text (very useful on mobile):

but at work we want it to look like thi

Here's some code for that...

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

    position: relative;

    right: -10px;

    height: 35px;

    width: 35px;

    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAgMEwzMiAwIDMyIDMyIDAgMzJ6IiBvcGFjaXR5PSIuODciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MTggLTExNjEpIHRyYW5zbGF0ZSg1MTUgMTAwMykgdHJhbnNsYXRlKDMwMyAxNTgpIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTE2IDIuNjY3QzguNjI3IDIuNjY3IDIuNjY3IDguNjI3IDIuNjY3IDE2UzguNjI3IDI5LjMzMyAxNiAyOS4zMzMgMjkuMzMzIDIzLjM3MyAyOS4zMzMgMTYgMjMuMzczIDIuNjY3IDE2IDIuNjY3em01LjczMyAxOS4wNjZjLS41Mi41Mi0xLjM2LjUyLTEuODggMEwxNiAxNy44OGwtMy44NTMgMy44NTNjLS41Mi41Mi0xLjM2LjUyLTEuODggMC0uNTItLjUyLS41Mi0xLjM2IDAtMS44OEwxNC4xMiAxNmwtMy44NTMtMy44NTNjLS41Mi0uNTItLjUyLTEuMzYgMC0xLjg4LjUyLS41MiAxLjM2LS41MiAxLjg4IDBMMTYgMTQuMTJsMy44NTMtMy44NTNjLjUyLS41MiAxLjM2LS41MiAxLjg4IDAgLjUyLjUyLjUyIDEuMzYgMCAxLjg4TDE3Ljg4IDE2bDMuODUzIDMuODUzYy41MDcuNTA3LjUwNyAxLjM2IDAgMS44OHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MTggLTExNjEpIHRyYW5zbGF0ZSg1MTUgMTAwMykgdHJhbnNsYXRlKDMwMyAxNTgpIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=)

      no-repeat left center;

    background-size: contain;

    -webkit-appearance: none;

  }