Firefox 输入元素（搜索框）中的光标位置错误

Question

搜索框中的光标在 Firefox 中显示太靠左，但在 Chrome 和 Safari 中看起来不错。 CSS 使用Modernizr 在可能的情况下显示边界半径，因此问题与提供普通方形框的 IE 无关。

这是 HTML：

<form action="/search-results/" id="search" role="search">
<input type="search" placeholder="Search this site here" name="q" results=5 id="q" autocomplete="off" size="31"/>
</form>

CSS如下：

input::-webkit-input-placeholder {
    color:    #999;
}
input:-moz-placeholder {
    color:    #999;

显示占位符和

.borderradius #search input#q {
    width: 180px;
    height: 20px;
    font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    background: #fcfcfc;
    border: 1px solid #d1d1d1;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.no-borderradius #search input#q {
    border: 1px solid #ccc;
    background: #eee;
    font: inherit;
    width: 170px;
    height: 20px;
    padding: 0 0 0 8px
}

设置框的样式。

我还添加了这个：

/* Remove default input type="search styling */
input[type="search"] {
  -webkit-appearance: textfield; /* You could also use none */
}

（我在this article 中看到）具有移除 Webkit 搜索框的“强制”样式的效果——这意味着它可以在 Mozilla 中以正确的样式一致地呈现。

在输入标签中添加results=5attribute，虽然目前没有验证，但在Webkit中显示一个放大镜。

以上代码也可以在my site在线查看。

搜索框显示如下：

Safari

铬

火狐

Firefox 不显示放大镜，但没关系。另一方面，虽然调整框上的边距和/或填充可以纠正错误的（太左）Firefox 光标显示，但这样做的代价是在 Webkit 浏览器中将其推得太右（不可接受）。在这种情况下，我还没有找到只针对 Mozilla 的方法。欢迎任何建议...

Answer 1

公平地说，Firefox 没有显示 错误 光标位置。如果删除无效的results 属性，您将看到光标位置在 webkit 中的相同位置。

我不确定您尝试了哪些填充/边距，但下面的填充在两个浏览器中看起来都不错。使用了box-sizing: 属性，以便输入在所有浏览器中的行为方式相同，并且不会因额外的填充而使框变大。

.borderradius #search input#q{
    padding: 0 0 0 6px;
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    box-sizing: padding-box;
}

Answer 2

这很复杂——在我看来，要让新表单元素的原生样式在跨浏览器上正常工作，我们还有一段路要走。我整理了a fiddle，它显示了在 webkit 浏览器和 Firefox 中正确显示搜索输入所需的代码。

This article by Trent Walton 描述了影响搜索输入外观的各种属性，以及始终出色的 CSS 技巧also has some useful information。

基本上，我已经使用以下代码推翻了浏览器的原生样式：

-moz-appearance: none;
-webkit-appearance: none;

然后我使用-moz-padding-start property（谁知道？）为Firefox 添加了一些左填充。

因此，尽管这可行，但必须跳过这些障碍远非理想。关于@tw16 答案的注释：-moz-box-sizing 目前甚至被最新版本的 Firefox 使用，但将来可能会被无前缀版本取代，这可能会破坏该解决方案。公平地说，-moz-padding-start 可能会在未来的某个时候被类似地取代，尽管CSS Writing Module 似乎更加晦涩（至少对我而言）。