@thebluefox подвел итог больше всего. Вы также вынуждены использовать JavaScript, чтобы эта кнопка работала в любом случае. Вот SSCCE, вы можете копировать и запускать его:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
$(this).prev('input').val('').trigger('change').focus();
}));
});
</script>
<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="deletable">
</body>
</html>
Живой пример здесь .
jQuery , кстати, не нужен, он просто отлично отделяет логику, необходимую для прогрессивного улучшения, от источника, вы, конечно, также можете использовать простой HTML / CSS / JS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 2803532, with "plain" HTML/CSS/JS</title>
<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<span class="deleteicon">
<input type="text">
<span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
</span>
</body>
</html>
Вы получаете только уродливый HTML (и JS, не совместимый с кроссбраузерными приложениями;)).
Обратите внимание, что если внешний вид пользовательского интерфейса не является вашей самой большой проблемой, а его функциональность вызывает беспокойство, просто используйте <input type="search">вместо <input type="text">. Он покажет кнопку очистки (для конкретного браузера) в браузерах с поддержкой HTML5.
class="fa fa-remove"top:дочерний диапазон и установивdisplay: flex; align-items: center;в родительском диапазоне.В настоящее время с HTML5 это довольно просто:
Большинство современных браузеров по умолчанию автоматически отображают полезную кнопку очистки в поле.
(Если вы используете Bootstrap, вам нужно будет добавить переопределение в свой файл css, чтобы он отображался)
Браузеры Safari / WebKit также могут предоставлять дополнительные функции при использовании
type="search", напримерresults=5иautosave="...", но они также отменяют многие из ваших стилей (например, высоту, границы). Чтобы предотвратить эти переопределения, сохранив при этом такие функции, как кнопка X, вы можете добавить это в свой css:См. Css-tricks.com для получения дополнительной информации о функциях, предоставляемых
type="search".источник
HTML5 вводит тип ввода «поиск», который, я считаю, делает то, что вы хотите.
<input type="search" />Вот живой пример .
источник
Ознакомьтесь с нашим плагином jQuery-ClearSearch . Это настраиваемый плагин jQuery - легко адаптировать его к вашим потребностям путем стилизации поля ввода. Просто используйте его следующим образом:
Пример: http://jsfiddle.net/wldaunfr/FERw3/
источник
К сожалению, вы не можете поместить его в текстовое поле, только чтобы он выглядел так, как будто он внутри него, что, к сожалению, означает, что требуется некоторый css: P
Теория заключается в том, чтобы обернуть ввод в div, убрать все границы и фон с ввода, а затем стилизовать div, чтобы он выглядел как поле. Затем вставьте свою кнопку после поля ввода в коде, и рабочие места будут хороши.
Как только у вас все равно будет работать;)
источник
У меня есть креативное решение, я думаю, вы ищете
https://jsfiddle.net/qdesign/xn9eogmx/1/
источник
Конечно, лучший подход - использовать все более поддерживаемые
<input type="search" />.В любом случае, для небольшого веселья с кодированием я подумал, что этого можно достичь также с помощью кнопки сброса формы, и это рабочий результат (стоит отметить, что при таком подходе нельзя использовать другие входные данные, кроме поля поиска, или кнопка сброса стирает их тоже), javascript не требуется:
источник
Может быть, поможет это простое решение:
источник
@ Махмуд Али Касим
Я только что изменил CSS, чтобы он выглядел по-другому, и добавил focus ();
https://jsfiddle.net/xn9eogmx/81/
источник