Question

我遇到与this guy's类似的问题，但它发生在Chrome中。

值设置为=“”，因此Firefox问题的修复程序已经发挥作用。这只发生在Chrome中，而不是在Firefox中。我的搜索表单主题通过Wordpress的代码如下：

<form method="get" class="searchBox" action="<?php bloginfo('url'); ?>">

<div id="search-form-wrap">



    <input type="text" id="searchBox" name="s" value="" accesskey="4" />

    <input type="image" name="submit" id="searchsubmit" class="nothidden" value="" />



    <?php if ( get_option('k2livesearch') ): ?>



    <?php endif; ?>

<span id="searchreset" title="<?php esc_attr_e('Reset Search', 'k2_domain'); ?>"></span>

        <span id="searchload"></span>

Answer 1

在CSS中添加以下内容：

.nothidden {
text-indent: -9999px;
}

如果有的话，这将隐藏文本。

Answer 2

对于迟到感到抱歉，但对于想要提交图片的所有人来说，一个好的答案可能会有所帮助...

好吧我会说为什么不尝试使用真正的提交类型和一些CSS，如下面我的例子，也许它没有按你要求的方式解决，但我相信这是解决你的问题的最佳方法，它将是W3C有效并且它适用于所有浏览器没有更好的方法来处理图像，所以我请你尝试我提供的代码，我希望你会喜欢我会这样做的方式...

您的提交行是：

<input type="image" name="submit" id="searchsubmit" class="nothidden" value="" />

将其更改为真实的提交按钮：

<input class="nothidden" type="submit" name="submit" id="searchsubmit" value="Your value" /><!--// Add the style below and edit if needed to your style.css file to create what you want! //-->

现在你会说“我不想要一个奇怪的标准提交按钮！”并且我同意！这就是为什么使用下面的样式，CSS将帮助我们使用提交类型图像，所以请阅读下面的CSS ...

你没有发布你的CSS行，所以我无法为你的项目写出最好的CSS，但我希望我的回答会有所帮助。

    input.nothidden {
border-style: none; /** This is needed to remove borders! **/
display: block;
font-size: 11px; /** Define your font size **/
font-weight: bold; /** Define your font weight **/
height: 23px !important; /** Height of your image **/
/** padding: 4px 0 0; - add some padding if needed... **/
text-align: center; /** Where do you want the text? left, right or center?**/
text-decoration: none; /** Don't want a underline or other decorations? **/
width: 91px; /** Width of your image **/
background: url(http://www.hollandiateam.eu/plaatjes/purple_small.gif) no-repeat scroll 0 0 transparent; /** This is what you want! a image to submit your form and don't  use any javascript, W3C validation and no problems in firefox, Chrome and Internet Explorer! **/
border: none;  /** This is needed to remove image border! **/
color: #080808; /** This is the text color change it to your favorite color **/
} /** The css lines below if you want a hover image sprite or an other hover image, colors etc! **/
   /** use the css below if you would like to have hover changes! **/
input.nothidden:hover {
background-position: 0 -23px; /** example if you're using a sprite image, else use background: url(http://www.hollandiateam.eu/plaatjes/purple_small.gif) no-repeat scroll 0 0 transparent; with the path to your image, if you want to use hover and don't use sprites, you will need to add all css lines used by the input.nothidden class and change image url for hover... **/
color: #0000ff; /** hover text color **/
}

如果您使用上述代码，它将适用于所有浏览器，如果您无法使用此功能，请发布您的CSS和表单代码，我将编辑我的答案以满足您的需求。

快乐编码

〜威廉

图像按钮在Chrome中显示“提交”图像顶部

2 个答案: