CSSを使用して入力ボタンの画像を変更するにはどうすればよいですか？

だから、私は画像を使って入力ボタンを作成することができます

<INPUT type="image" src="/images/Btn.PNG" value="">

しかし、CSSを使用して同じ動作を取得することはできません。たとえば、私は試しました

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

「myButton」はCSSファイルで次のように定義されています

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

それがやりたいことがすべてであれば、元のスタイルを使用できますが、ホバー時のボタンの外観を変更します（myButton:hoverクラスを使用）。ページの他の部分の背景画像用に（チェックとして）リンクをロードできたので、リンクが適切であることはわかっています。JavaScriptを使用してそれを行う方法の例をWebで見つけましたが、CSSソリューションを探しています。

違いがある場合は、Firefox 3.0.3を使用しています。

CSSを使用してボタンのスタイルを設定する場合は、type = "image"ではなくtype = "submit"ボタンにします。type = "image"は、CSSで設定できないSRCを想定しています。

Safariでは、目的の方法でボタンのスタイルを設定できないことに注意してください。Safariサポートが必要な場合は、画像を配置し、フォームを送信するonclick関数を用意する必要があります。

<button>タグを使用できます。送信するには、単にを追加しtype="submit"ます。次に、ボタンをグラフィックとして表示する場合は、背景画像を使用します。

そのようです：

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.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(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

これはSafariでも機能します。

送信ボタンのCSS画像の置換に関するこの記事が役立つ場合があります。

「このメソッドを使用すると、スタイルシートがアクティブなときにクリック可能な画像が得られ、スタイルシートがオフのときに標準のボタンが得られます。コツは、画像置換メソッドをボタンタグに適用して、送信ボタンとしてではなく、送信ボタンとして使用することです。入力を使用します。

また、ボタンの境界線が消去されるため、ボタンのカーソルをリンクに使用される手の形に変更することをお勧めします。これにより、ユーザーに視覚的なヒントが提供されます。」

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;
}

これはより簡単な解決策ですが、周囲に余分なdivはありません。

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

CSSは、基本的な画像置換手法を使用します。ボーナスポイントについては、イメージスプライトを使用して示しています。

<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/

これがInternet Explorerで私にとってうまく機能したもので、Philoyeによるソリューションを少し変更したものです。

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

タグのターゲットとして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の行の高さのソリューションに、ボタンが反応しないという問題がありました。これで、ハンドカーソルも取得できます。

<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;
}

以下が最良の解決策だと思います：

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と画像なしの私の解決策はこれです：

* 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;}

おそらく、JavaScriptで.jsファイルもインポートして、そこに画像を置き換えることができます。

入力タイプまたはsrcさえ変更できないと仮定しましょう。遊ぶためのCSSしかありません。

必要な高さがわかっていて、代わりに使用したい背景画像のURLがあれば、運がいいです。

高さをゼロに設定し、パディングトップを必要な高さに設定します。これにより、元の画像が見えなくなり、CSS背景画像を表示するための完全にクリーンなスペースが得られます。

Chromeで動作します。IEで動作するかどうかはわかりません。かろうじて何か賢いことはするので、おそらくそうではありません。

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">