Safari 7中搜索取消按钮的位置

Question

我有一个input[type=search]并给了它一些padding 在Safari 7（至少是特立独行者）中，搜索取消按钮被截止。我怎么能纠正这个？

我一直在尝试::-webkit-search-cancel-button选择器和大小调整，但没有运气。

jsFiddle：http://jsfiddle.net/hjtkarLc/

jsFiddle设置：

CSS

input {
    float: left;
    clear: both;
    margin: 1em;
}
input[type="search"] {
    -webkit-appearance: none;
}
#withPadding {
    padding: 0.7em;
}

HTML

<input type="search" value="I'm ok" />
<input type="search" id="withPadding" value="I'm cutoff" />

Answer 1

向z-index添加input[type="search"]::-webkit-search-cancel-button，然后调整padding-right为我工作。

现在它在Chrome和Safari中正常运行。

jsfiddle： http://jsfiddle.net/celeryclub/u8mhs7aj/1/

Answer 2

您的问题的解决方案可能是仅对取消按钮应用额外的填充，如下所示：

<xsl:stylesheet version="1.0">
<xsl:template match="/">
<!--variable structure--> 
<cmism:deliveryDate><xsl:value-of select="current-dateTime()"/>
</cmism:deliveryDate>
</xsl:template>
</xsl:stylesheet>

你说你尝试过-webkit-search-cancel-button，但是你的jsFiddle没有实现，所以我给了你这个提示。

Answer 3

刚遇到同样的问题。这必须是一个Safari错误，因为它本地化到一个浏览器。即使图标被截断，点击区域也是您认为图标的位置。

问题演示 - http://codepen.io/cshold/pen/yNWoNo

不起作用的事情：

• 向input[type="search"]::-webkit-search-cancel-button添加填充以缩放Chrome中的图标，但在Safari中无效。
• 将上述选择器设置为position: relative。这在视觉上显示了关闭按钮，但点击区域不在图标的顶部。

我已经向bugreport.apple.com提交了一份错误报告。