Webkit 使用从右到左文本的搜索输入元素的样式

Question

我在我的标记中使用搜索输入，如下所示:

<input type="search" placeholder="search" />

Webkit以多种方式样式化'search'类型的输入元素。

一个特点是，当你开始输入时，你会在输入元素的右侧看到一个取消('x')按钮。

但是，如果您使用的是从右到左的语言，如希伯来语或阿拉伯语- webkit取消按钮仍然出现在右侧(而不是lhs)。

这里有一个小提琴可以证明这一点。

1. 这是webkit bug吗?

2. 如果它是一个bug -是否有一个解决方案，我仍然可以使用type="search"在我的标记

Answer 1

严格意义上说，这不是一个bug，因为取消按钮没有公开规范。这是一个(错误的)功能，或者说是不完整的本地化。在2010年的WebKit Bugzilla大会上，它被称为Bug 51499，并且看起来不会被修复。

Answer 2

为了完整起见，我刚刚在这篇文章中找到了一个解决方法

下面的代码将使您能够根据需要设置'x'按钮的样式和位置。

input[type="search"]::-webkit-search-cancel-button {
   /* Remove default */
    -webkit-appearance: none;
    /* Now your own custom styles */
    ...
    ...
}

查看这个的LIVE DEMO。

同样，你也可以像这样完全删除webkit取消按钮:

input[type="search"]::-webkit-search-cancel-button
{
  display: none;
}