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 */
}

我在 这篇文章），它具有删除 Webkit 搜索框的“强制”样式的效果，这意味着可以使其一致地呈现在 Mozilla 中具有正确的样式。

在输入标记中添加 results=5 属性（尽管当前尚未验证）会在 Webkit 中显示放大镜。

上述代码也可以在我的网站上在线查看。

搜索框显示如下：

Safari

Chrome

Firefox

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 浏览器中正确显示搜索输入所需的代码，并且火狐。

Trent Walton 的这篇文章介绍了影响外观的各种属性搜索输入，并且总是出色的 CSS 技巧 也有一些有用的信息。

基本上，我使用此代码推翻了浏览器的本机样式：

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

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

因此，虽然这可行，但要跨越这些障碍还远非理想。关于 @tw16 的答案的注释：-moz-box-sizing 目前甚至被最新版本的 Firefox 使用，但将来可能会被无前缀版本取代，这将有可能打破这个解决方案。公平地说，-moz-padding-start 可能会在未来的某个时候被类似地替换，尽管 CSS 编写模块 似乎更晦涩（至少对我来说）。