WebKit 和 Mozilla 中的 -ms-clear 等价物是啥？

Posted 2023-04-18

【中文标题】WebKit 和 Mozilla 中的 -ms-clear 等价物是啥？

【英文标题】：What is -ms-clear equivalent in WebKit and Mozilla?WebKit 和 Mozilla 中的 -ms-clear 等价物是什么？

【发布时间】：2012-08-13 18:24:59

【问题描述】：

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

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

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

【问题讨论】：

在回答中提供了我的 jQuery 插件链接 - 在所有浏览器中几乎都一样

【参考方案1】：

简短的回答是不。

如果不使用 JavaScript，就无法使用 CSS 生成一个可以清除输入内容的按钮。

清除按钮是 IE10 的内置功能。 -ms-clear 不是生成它的原因，而只是将其定位为样式的一种方式。

我应该提一下，Chrome 中的 <input type=search>​ 字段也会为您提供一个清除按钮，但不会在普通的 <input type=text>​ 字段上。

【参考方案2】：

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

---

关于这背后的诡计：

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

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

然后通过映射它的位置来处理它的点击事件（你可以查看源代码以及详细的逻辑）

【参考方案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();
);

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

【参考方案4】：

你不喜欢 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”。

【讨论】：

我知道使用 JavaScript 是可能的，我已经有了解决方案，IE 10 默认显示关闭按钮，我想知道是否有其他浏览器会提供类似的解决方案或已经拥有它。