如何使用CSS更改inputbutton图像?

所以,我可以使用一个图像创build一个inputbutton

<INPUT type="image" src="http://img.dovov.comBtn.PNG" value=""> 

但是,我不能使用CSS获得相同的行为。 例如,我试过了

 <INPUT type="image" class="myButton" value=""> 

其中“myButton”在CSS文件中定义为

 .myButton { background:url(http://img.dovov.comBtn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; } 

如果这就是我想要做的,我可以使用原始样式,但是我想要改变button的hover外观(使用myButton:hover类)。 我知道链接是好的,因为我已经能够加载他们为页面的其他部分的背景图像(就像一张支票)。 我在网上find了如何使用JavaScript做的例子,但我正在寻找一个CSS解决scheme。

我正在使用Firefox 3.0.3,如果这有所作为。

如果你想使用CSS来设置button的风格,可以使用type =“submit”button来代替type =“image”。 type =“image”需要一个SRC,你不能在CSS中设置。

请注意,Safari不会让您按照您要查找的方式devise任何button。 如果您需要Safari支持,则需要放置图像并使用提交表单的onclick函数。

您可以使用<button>标签。 对于提交,只需添加type="submit" 。 然后使用背景图像,当您想要button显示为graphics。

像这样:

 <button type="submit" style="border: 0; background: transparent"> <img src="http://img.dovov.comBtn.PNG" width="90" height="50" alt="submit" /> </button> 

更多信息: http : //htmldog.com/reference/htmltags/button/

HTML

 <div class="myButton"><INPUT type="submit" name="" value=""></div> 

CSS

 div.myButton input { background:url(http://img.dovov.comBtn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; } 

这将在任何地方,即使在Safari。

这篇文章关于CSS图像replace提交button可以帮助。

“使用这种方法,当样式表处于活动状态时,会获得一个可点击的图像,样式表closures时会出现标准button。技巧是将图像replace方法应用到button标签,并将其用作提交button,而不是使用input。

而且由于button边框被删除,所以也build议将button光标改变为用于链接的手形button,因为这为用户提供了视觉提示。

CSS代码:

 #replacement-1 { width: 100px; height: 55px; margin: 0; padding: 0; border: 0; background: transparent url(image.gif) no-repeat center top; text-indent: -1000em; cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ } #replacement-2 { width: 100px; height: 55px; padding: 55px 0 0; margin: 0; border: 0; background: transparent url(image.gif) no-repeat center top; overflow: hidden; cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ } form>#replacement-2 { /* For non-IE browsers*/ height: 0px; } 

这是一个更简单的解决scheme,但没有额外的周边div:

 <input type="submit" value="Submit"> 

CSS使用基本的图像replace技术。 对于奖励积分,它显示使用图像精灵:

 <style> input[type="submit"] { border: 0; background: url('sprite.png') no-repeat -40px left; text-indent: -9999em; line-height:3000; width: 50px; height: 20px; } </style> 

资料来源: http : //work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

您可以在您的标记中使用blank.gif(1px透明图像)作为目标

 <input type="image" src="img/blank.gif" class="button"> 

然后在CSS样式背景:

 .button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;} .button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;} 

以前的答案的变化。 我发现,需要设置不透明度,当然这将在IE6和以上工作。 IE8中的行高解决scheme存在一个问题,即button不响应。 而且你也得到了一个手形光标!

 <div id="myButton"> <input id="myInputButton" type="submit" name="" value=""> </div> #myButton { background: url("form_send_button.gif") no-repeat; width: 62px; height: 24px; } #myInputButton { background: url("form_send_button.gif") no-repeat; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); width: 67px; height: 26px; cursor: pointer; cursor: hand; } 

这是我在IE浏览器上的工作,对Philoye的解决scheme稍作修改。

 >#divbutton { position:relative; top:-64px; left:210px; background: transparent url("../..http://img.dovov.comlogin_go.png") no-repeat; line-height:3000; width:33px; height:32px; border:none; cursor:pointer; } 

我认为以下是最好的解决scheme:

CSS:

 .edit-button { background-image: url(edit.png); background-size: 100%; background-repeat:no-repeat; width: 24px; height: 24px; } 

HTML:

 <input class="edit-button" type="image" src="transparent.png" /> 

我没有js和没有图像的解决scheme是这样的:

* HTML:

 <input type=Submit class=continue_shopping_2 name=Register title="Confirm Your Data!" value="confirm your data"> 

* CSS:

 .continue_shopping_2:hover{ background-color:#FF9933; text-decoration:none; color:#FFFFFF;} .continue_shopping_2{ padding:0 0 3px 0; cursor:pointer; background-color:#EC5500; display:block; text-align:center; margin-top:8px; width:174px; height:21px; border-radius:5px; border-width:1px; border-style:solid; border-color:#919191; font-family:Verdana; font-size:13px; font-style:normal; line-height:normal; font-weight:bold; color:#FFFFFF;} 

也许你可以导入一个.js文件,然后在JavaScript中replace图片。