Input[type="search"] not working on IE9 and below

Problem

input[type="search"] not working on IE9 and below. Please can you give me idea about it? It will be very thankful. you can see the screenshot:

enter image description here

.search-form .row input[type="search"] {
    color:#9fa0a0;
    font-size:20px;
    padding:0;
    line-height:25px;
    border:none;
    background:none;
    -webkit-appearance:none;
    padding:8px 5px 7px 11px;
    margin:0;
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    float:left;
}
Problem courtesy of: Kumar

Solution

Its because <input type="search"/> is itself not supported by IE so it falls back to text field.Check this link.

You can use this trick to get similar effect in case of fallback

.search-form .row input[type="search"],
.search-form .row input {
    color:#9fa0a0;
    font-size:20px;
    padding:0;
    line-height:25px;
    border:none;
    background:none;
    -webkit-appearance:none;
    padding:8px 5px 7px 11px;
    margin:0;
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    float:left;
}

PS : make sure you don't have any other input fields under .search-form .row as otherwise this will affect those too. So I would suggest using an Id selector for this field

Solution courtesy of: Shiva

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.