1<input type="search" placeholder="Search..."/>
2
3<style>
4 input[type=search]::-webkit-search-cancel-button {
5 -webkit-appearance: searchfield-cancel-button;
6 }
7
8 input[type=search] {
9 -webkit-appearance: none;
10 }
11</style>
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <title>SO question 2803532</title>
5 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
6 <script>
7 $(document).ready(function() {
8 $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
9 $(this).prev('input').val('').trigger('change').focus();
10 }));
11 });
12 </script>
13 <style>
14 span.deleteicon {
15 position: relative;
16 }
17 span.deleteicon span {
18 position: absolute;
19 display: block;
20 top: 5px;
21 right: 0px;
22 width: 16px;
23 height: 16px;
24 background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
25 cursor: pointer;
26 }
27 span.deleteicon input {
28 padding-right: 16px;
29 box-sizing: border-box;
30 }
31 </style>
32 </head>
33 <body>
34 <input type="text" class="deletable">
35 </body>
36</html>
37