javascript - 当搜索图标位于 LTR 网站左侧时扩展搜索栏问题

Question

我正在使用 Expanding Search Bar ，但根据我的要求/设计，搜索图标应位于左侧。因此，我修改了代码，将 right 替换为 left，将 float: right 替换为 float: left 并交换搜索输入的右填充和左填充。

现在，当我单击搜索图标时，搜索输入会展开。但是搜索图标会向左移动，直到转换完成。

我猜是因为专注于搜索输入(direction: ltr)，才会出现这个问题。我对此了解不多。如何解决？

这是 fiddle .

Answer 1

如果加上overflow:visible;到搜索打开状态，它会阻止 Chrome 中的移动:

.sb-search.sb-search-open, .no-js .sb-search {
    width: 100%;
    overflow: visible;
}

这是我正在玩的 fiddle :http://jsfiddle.net/MathiasaurusRex/j7679/1/