web-dev-qa-db-ja.com

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クラスを使用）。私はリンクが良いことを知っています、なぜなら私はそれらをページの他の部分の背景画像のために（ちょうどチェックとして）ロードすることができたからです。 Web上でJavaScriptを使用してそれを実行する方法の例を見つけましたが、CSSソリューションを探しています。

違いが出るのであれば、Firefox 3.0.3を使っています。

cssinput-button-image
181
Baltimark

CSSを使用してボタンのスタイルを設定する場合は、type = "image"ではなくtype = "submit"ボタンにしてください。 type = "image"はSRCを期待します。これはCSSでは設定できません。

Safariでは、あなたが探している方法でボタンのスタイルを設定することはできません。 Safariのサポートが必要な場合は、画像を配置してフォームを送信するonclick機能を使用する必要があります。

117
ceejayoz

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

110
Dimitry

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でも、これはどこでも動作します。

72
SI Web Design

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

これはもっと簡単な解決策ですが、周囲にdivを追加する必要はありません。

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

CSSは基本的な画像置換技術を使用しています。ボーナスポイントの場合は、画像Spriteを使用して表示されます。

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

12
philoye

これが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;
}
2
user545376

前の答えの変形です。不透明度を設定する必要があることがわかりました。もちろんこれは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;
}
2
Reed Richards

私は以下が最善の解決策だと思います：

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" />
2
inf3rno

あなたのタグのターゲットとして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;}
2
dafyk

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

たぶん、あなたはちょうど.jsファイルをインポートし、そこに画像置換をJavaScriptで持っていることができます。

0
Pythagorus