css - WebKit 和 Mozilla 中的 -ms-clear 等价物是什么？

Question

如此处所示：http: //msdn.microsoft.com/library/windows/apps/Hh465498

Mozilla 和 Webkit 有相同的选项吗？文本输入上的清除按钮适用于触摸屏应用程序。我不想要任何 JavaScript 变通办法，简单的 CSS 修复会非常有帮助。

我已经知道这可以通过 JavaScript 实现，但是 IE 10 有一个用于显示清除按钮的内置解决方案，我想知道是否有其他浏览器有类似的选项？

Answer 1

Answer 2

正在寻找同样的问题，所以我制作了一个 jQuery 插件（TextClear）来提供相同的功能：
这里是下载链接

---

以及这背后的技巧：

• 在输入文本字段上设置背景图像并将其定位到右上角，例如

{
  background-image: url('imagesUrl');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10% 90%;
  padding-right: 1%;
}

• 然后通过映射其位置来处理其上的点击事件（您也可以查看源代码以了解详细逻辑）

Answer 3

您实际上无法使用 css 执行此操作。

但是你可以使用 jQuery，而且它很简单。你要做的就是这个...

HTML 代码：

<form id="myform" method="post">
<input type.... />
<input type.... />
<input type.... />
<input type="button" id="clear" name="clear" />
</form>

jQuery代码：

$("#clear").click(function(){
     $("#myform").reset();
});

这将起作用..但是表单标签是必要的。

Answer 4

YU NO 喜欢 Javascript 吗？看看 jQuery 使这个过程变得多么简单：

标记

<form>
    <input type="text">
    <button>X</button>
</form>

jQuery

$("form").on("click", "button", function() {
    $("input").val("");
    return false;
});​​​​​

http://jsfiddle.net/QyE92/

使用 CSS，您可以设置按钮的样式并将其放置在适当的位置，以几乎完全模仿 Metro 界面中的“x”。