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

在Firefox中，搜索框中的光标显示得太靠左了，而在Chrome和Safari中，光标显示得很好，这让我遇到了麻烦。CSS在可能的情况下使用显示边界半径，因此问题与IE无关，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>

显示占位符和

.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中显示一个放大镜

上述代码也可以在线查看

搜索框显示如下：

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

Safari

Chrome

Firefox

---

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

公平地说，Firefox没有显示错误的光标位置。如果删除无效的

results

属性，您将看到光标位置在webkit中的相同位置

我不确定您尝试过什么填充/边距，但下面的填充在两种浏览器中都很好。使用

框大小调整：

属性，以便输入在所有浏览器中都以相同的方式运行，并且不会使用额外的填充使框变大

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

---

公平地说，Firefox没有显示错误的光标位置。如果删除无效的

results

属性，您将看到光标位置在webkit中的相同位置

我不确定您尝试过什么填充/边距，但下面的填充在两种浏览器中都很好。使用

框大小调整：

属性，以便输入在所有浏览器中都以相同的方式运行，并且不会使用额外的填充使框变大

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

---

这很复杂——在我看来，在新表单元素的本地样式在跨浏览器中正常工作之前，我们还有一些路要走。我已经准备好了在webkit浏览器和Firefox中正确显示搜索输入所需的代码

描述影响搜索输入外观的各种属性，以及始终出色的CSS技巧

基本上，我使用以下代码控制了浏览器的本机样式：

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

然后我使用（谁知道呢？）只为Firefox添加了一些左填充

---

因此，尽管这样做是可行的，但要跳出这些障碍还远远不够理想。关于@tw16的答案，有一点值得注意：

-moz-box-sizing

目前甚至被最新版本的Firefox所使用，但将来很可能会被无前缀版本所取代，这可能会破坏该解决方案。平心而论，

-moz padding start

可能在将来的某个时候也会被类似的替换，尽管它看起来更模糊（至少对我来说）。

这很复杂-在我看来，在新表单元素的本机样式在跨浏览器运行之前，我们还有一些路要走。我已经准备好了在webkit浏览器和Firefox中正确显示搜索输入所需的代码

描述影响搜索输入外观的各种属性，以及始终出色的CSS技巧

基本上，我使用以下代码控制了浏览器的本机样式：

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

然后我使用（谁知道呢？）只为Firefox添加了一些左填充

---

因此，尽管这样做是可行的，但要跳出这些障碍还远远不够理想。关于@tw16的答案，有一点值得注意：

-moz-box-sizing

目前甚至被最新版本的Firefox所使用，但将来很可能会被无前缀版本所取代，这可能会破坏该解决方案。平心而论，

-moz padding start

可能在将来的某个时候也会被类似的替代，尽管它看起来更模糊（至少对我来说）。

谢谢。CSS技巧文章实际上是什么让我想要像这样设计这个框的另一种方式，把它设计成一个Webkit搜索框，而不是另一种方式。我忘了在问题中提到，我已经通过使用

/*Remove default input type=“search styleing*/input[type=“search”]{-Webkit外观：textfield；/*您也可以使用none*/}

来删除默认的Webkit样式，这与您的小提琴中的最后一个选择器获得相同的结果（我认为）。我对问题进行了编辑，以明确这一点。感谢您的解决方案！不过，还有一个问题是，额外的填充会按适当比例延长搜索框[请参见此处的屏幕截图：]-因此，最终，我们回到了-moz框大小调整解决方案，除非有一种方法可以指定适用于所有浏览器的最大宽度，而不考虑填充。谢谢。CSS技巧文章实际上是让我想要这样设计框的原因，相反，将其设计为Webkit搜索框相反，我忘了在问题中提到，我已经通过使用

/*Remove default input type=“search styleing*/input[type=“search”]{-Webkit-appearance:textfield；/*删除了默认的Webkit样式，您还可以使用none*/}

，这与您的小提琴中的最后一个选择器（我认为）获得了相同的结果。我对问题进行了编辑，以澄清这一点。谢谢你的解决方案！不过，还有一个问题是，额外的填充将搜索框按适当比例加长（参见此处的屏幕截图）：-因此最终，