Recently, I implemented a search feature on this codepen and everything appeared to be working fine in Firefox.
The state currently showing is :focus, with the input[type="reset"] displaying 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; }
However, in Chrome and Safari, it seems that the input type reset may not be necessary as there is a button that appears to clear the input field.
Chrome
Safari
In addition, I noticed that Chrome adds a border to my input[type="search"] while Safari rounds out the input. Despite setting the CSS class for border: none, only Firefox seems to respect this style.
.lab-search-field input[type="search"] {
font-size: 23px;
line-height: 36px;
vertical-align:middle;
width: 240px;
border:none;
}
EDIT 1:
After some research, I came across How can I get rid of input border in chrome? where the addition of outline: none; helped remove the blue border in Chrome but did not address the issue with the "X".