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

我有一个类似于this guy's的问题，但它发生在Chrome中。图像按钮在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>

来源

2012-06-27 Logan Rapp

在你的CSS添加以下内容：

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

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

来源

2012-06-28 05:54:32 Libin

对不起，我来晚了，但一个很好的答案可能会有所帮助所有谁想要提交图片...

嗯，我会说，为什么不尝试用一个真正的提交类型，像我举的例子下面一些CSS，也许它不是按照你所要求的方式解决的，但我相信这是解决你的问题的最好方法，它将是W3C Valid，它可以在所有浏览器中工作，没有更好的方式来用图像做到这一点，所以我恳请你尝试我提供的代码，我希望你会喜欢我做的方式...

您提交行是：

<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-10 23:12:05 jagb

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

回答

相关问题