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

Question

我在Firefox中显示太远的搜索框中遇到光标问题，而在Chrome和Safari中看起来很好。 CSS使用Modernizr在可能的情况下显示borderradius，因此该问题不涉及提供普通方框的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=5属性，虽然它当前没有验证，但在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似乎更加模糊（至少对我来说）。