0

送信ボタンを作成してスタイルを設定したい

input type="submit" style="buttonClass">

ホバー状態と通常状態の両方で機能するCSSと提供された画像を使用しますが、目的の出力に到達できません。完璧なアンカー タグとスパンを使用してボタンを作成しましたが、送信ボタンにも同じルック アンド フィールが必要です。PS: ターゲット ブラウザーが IE7 と IE 8 になるため、css3 の moz と webtoolkit を使用できません。さらに、クライアントが提供する画像のみを使用する必要があります<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 stylesheetadd 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 に答える