[SOLVED] Clear icon is missing HTML5 input type=search with ASP.NET MVC and Bootstrap 3

Issue

I am working on an MVC application and would like to add an X for clearing current search criteria to my search box – like the one that comes by default with using input type=search in html5:
_{(source: html5tutorial.info)}

Below you can see my current code

@using (Html.BeginForm())
{
    <div class="input-group">
        @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control", placeholder = "Search by Author or Title" })
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </span>
    </div>
}

Solution

Add it in the htmlAttributes

@Html.TextBox("SearchString", ViewBag.CurrentFilter as string,
    new { @class = "form-control", placeholder = "Search by Author", @type= "search" })

If you’re using bootstrap, this icon won’t be displayed (issue). There is a workaround. Add the following style to override default bootstrap styles:

<style>
    input[type="search"]::-webkit-search-cancel-button {
        /*Bootstrap 3 override*/
        -webkit-appearance: searchfield-cancel-button !important;
    }
</style>

https://dotnetfiddle.net/8jcPZo

Answered By – adiga

Answer Checked By – Clifford M. (BugsFixing Volunteer)