送信ボタンを作成してスタイルを設定したい
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;
}