How to reset default styling of input[type="text"]:focus in Chrome and Safari?

Question

I had created a search feature on this codepen and seemed fine on Firefox.

As you can see the state is currently :focus and the input[type="reset"] was made by adding a background image.

HTML

<input type="reset" value="">

CSS

.lab-search-field input[type="reset"] {
  background-color: #fff;
  background-image: url('http://bones-bruxzir.jgallardo.me/assets/img/template/sprite-global.png');
  background-repeat: no-repeat;
  border: none;
  float: right;
  height: 30px;
  width: 30px;
  line-height: 36px;
  vertical-align: middle;
}
.lab-search-field input[type="reset"] { 
  background-position: -70px -280px; }
.lab-search-field input[type="reset"]:hover { 
  background-position: -110px -280px; }

But in Chrome and Safari the input type reset does not seem to be necessary because there is a button that gets displayed to cleat the input.

Chrome

Safari

As you can see, Chrome also adds a border to my input[type="search"] and Safari rounds out the input.

I thought that my CSS class of border: none would take care of it but apparently only in Firefox.

.lab-search-field input[type="search"] {
  font-size: 23px;
  line-height: 36px;
  vertical-align:middle;
  width: 240px;
  border:none;
}

---

EDIT 1:

I did find How can I get rid of input border in chrome? and added outline: none; which got rid of the blue border in Chrome but not the "X".

Answer 1

You can get rid of the reset button feature of webkit using:

input[type="search"] {
    -webkit-appearance: none;
}

::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

This works in Chrome for sure, but I haven't had the chance to test in Safari.