0

我想制作和样式提交按钮，即

输入类型=“提交”样式=“按钮类”>

使用 CSS 和提供的图像，既适用于悬停状态，也适用于正常状态，但是我无法达到所需的输出。我使用完美的锚标签和跨度创建了按钮，但我也希望提交按钮具有相同的外观和感觉。PS：我不能使用 css3 的 moz 和 webtooolkit，因为我的目标浏览器将是 IE7 和 IE 8，而且我必须只使用客户端提供的图像。有什么方法可以让提交按钮<input type="submit">达到所需的输出，就像使用锚按钮创建的按钮<a><span></span></a>？

剩下 正确的

原样的 HTML

 <a class="buttonImage" href="javascript:blankCheck('Approve');"><span> <bean:message key="button.common.submit"/> </span></a>

成为 HTML

<input type="submit" class="buttonImage">

CSS AS IS 用于使用锚的按钮

.buttonImage span  {
    background:  url('common/images/LeftButton.png') no-repeat 0 0; display: block;                                                                                                     
    line-height: 14px; padding: 7px 0 5px 8px; color: #1b1d60;
            }   
.buttonImage     
{
background:  url('common/images/RightButton.png') no-repeat top right; 
display: block;    float: left; height: 26px; margin-right: 6px; 
  padding-right: 7px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; 
   font-size:12px; font-weight:bold;
}

.buttonImage:hover span {
background-position: 0 -26px; color: #fff;
 }
.buttonImage:hover {
background-position: right -26px;
}

正确的图像 剩下

4

1 回答 1

0

现场演示

您好现在更改为您的某些属性css stylesheet或add two div in your anchor tag

像这样

请检查到这个

CSS

.buttonImage{
display:inline-block;
  vertical-align:top;
  text-decoration:none;
}
.buttonImage .left_img  {
    background:  url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0;
 float:left;    line-height: 15px; padding: 7px 0 5px 8px; color: #1b1d60;
}   
.right_img{
background:  url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0;
  float:left;   height: 27px;
  width:7px;
}
.buttonImage:hover .left_img, .buttonImage:hover .right_img{
background-position:0 -26px;
  color:#fff;
}

HTML

<a class="buttonImage" href="javascript:blankCheck('Approve');">
  <span class="left_img"> <bean:message key="button.common.submit"/>Hello this is coding 
  </span>
  <span class="right_img"></span>
</a>

演示

于 2012-11-08T07:12:27.883 回答