0

我有一个类似于这个人的问题，但它发生在 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>

4

2 回答 2

0

抱歉迟到了，但一个好的答案可能对所有想要提交图片的人都有帮助......

好吧，我想说为什么不尝试使用真正的提交类型和一些 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 和表单代码，我将根据您的需要编辑我的答案。

快乐编码

〜威廉

于 2014-09-10T23:12:05.223 回答
0

在您的 CSS 中添加以下内容：

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

这将隐藏文本（如果有）。

于 2012-06-28T05:54:32.573 回答