<input type="text" class="zbz-input-clearable zbz-input-clearable--x" value="тест" />
.zbz-input-clearable { /* ставим инпуту фоновую картинку, но отображаем ее за пределами инпута - 150% в background-position */ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTQzOEVEQkZFMjRDMTFFM0JDMDVDMjFEMDk4MTc0QTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTQzOEVEQzBFMjRDMTFFM0JDMDVDMjFEMDk4MTc0QTMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNDM4RURCREUyNEMxMUUzQkMwNUMyMUQwOTgxNzRBMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBNDM4RURCRUUyNEMxMUUzQkMwNUMyMUQwOTgxNzRBMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqwf5ocAAACpSURBVHjaYvT09GRjYGAQAuIXDISBBBC/3rZt219cCpighq0GYjkChslB1YniU8QEdVk0EC/FY6gcVD6akE+YoPQjPIYiG/aIUJgwIbGxGUqSYegGohtqQ6phIMCCRQykuRKIDwOxLSmGYXMhzJvtUMPaiYh9vAYih9kRImIfr4HYIuARqYYyERGbJBnKBM1OhGIT2VAJQrH8DohDicjLj6DqXuNTBBBgAL/OL+VnHD9pAAAAAElFTkSuQmCC"); background-position: 150% 50%; background-repeat: no-repeat; transition: background 0.4s; /* добавляем справа небольшой padding, чтоб текст не залазил поверх крестика */ padding-right: 27px; } .zbz-input-clearable--x { /* когда нужно отобразить крестик, перемещаем в правый конец инпута */ background-position: 100% 50%; } .zbz-input-clearable--x-over { /* и подготовим стиль для ховера по крестику */ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkI2QjEyRDJFMjRDMTFFMzgyRUZCRkUwOTc4ODc4NzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkI2QjEyRDNFMjRDMTFFMzgyRUZCRkUwOTc4ODc4NzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQjZCMTJEMEUyNEMxMUUzODJFRkJGRTA5Nzg4Nzg3NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQjZCMTJEMUUyNEMxMUUzODJFRkJGRTA5Nzg4Nzg3NSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiaX4hIAAACpSURBVHjaYvwVws7GwMAgBMQvGAgDCSB+zbr6x19cCpighq0GYjkChslB1YniU8QEdVk0EC/FY6gcVD6akE+YoPQjPIYiG/aIUJgwIbGxGUqSYegGohtqQ6phIMCCRQykuRKIDwOxLSmGYXMhzJvtUMPaiYh9vAYih9kRImIfr4HYIuARqYYyERGbJBnKBM1OhGIT2VAJQrH8DohDicjLj6DqXuNTBBBgANiWL+VbATXyAAAAAElFTkSuQmCC"); cursor: pointer; } .zbz-input-clearable::-ms-clear { /* убираем родной крестик очистки в IE */ display: none; }
(function($) { var input_class = "zbz-input-clearable", input_class_x = input_class + "--x", input_class_x_over = input_class + "--x-over", input_selector = "." + input_class, input_selector_x = "." + input_class_x, input_selector_x_over = "." + input_class_x_over, event_main = input_class + "-init", event_names = [ event_main, "focus drop paste keydown keypress input change" ].join(" "), btn_width = 13, btn_height = 13, btn_margin = 7; function tog(v) { return v ? "addClass" : "removeClass"; } $(document).on(event_names, input_selector, function() { $(this)[tog(this.value)](input_class_x); }); $(document).on("mousemove", input_selector_x, function(e) { var input = $(this), input_width = this.offsetWidth, input_height = this.offsetHeight, input_border_bottom = parseFloat(input.css("borderBottomWidth")), input_border_right = parseFloat(input.css("borderRightWidth")), input_border_left = parseFloat(input.css("borderLeftWidth")), input_border_top = parseFloat(input.css("borderTopWidth")), input_border_hr = input_border_left + input_border_right, input_border_vr = input_border_top + input_border_bottom, client_rect = this.getBoundingClientRect(), input_cursor_pos_x = e.clientX - client_rect.left, input_cursor_pos_y = e.clientY - client_rect.top, is_over_cross = true; is_over_cross = is_over_cross && input_cursor_pos_x >= input_width - input_border_hr - btn_margin - btn_width; is_over_cross = is_over_cross && input_cursor_pos_x <= input_width - input_border_hr - btn_margin; is_over_cross = is_over_cross && input_cursor_pos_y >= (input_height - input_border_vr - btn_height) / 2; is_over_cross = is_over_cross && input_cursor_pos_y <= (input_height - input_border_vr - btn_height) / 2 + btn_height; $(this)[tog(is_over_cross)](input_class_x_over); }); $(document).on("click", input_selector_x_over, function() { $(this) .removeClass([input_class_x, input_class_x_over].join(" ")) .val("") .trigger("input"); }); $(function() { $(input_selector).trigger(event_main); }); })(jQuery);