1. ホーム
  2. html

[解決済み] input type="button "に背景画像を追加するには?

2022-03-17 14:42:26

質問

入力ボタンの背景画像をCSSで変更しようとしているのですが、うまくいきません。

search.htmlをご覧ください。

<body>
    <form name="myform" class="wrapper">
        <input type="text" name="q" onkeyup="showUser()" />
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
         <p>
             <div id="txtHint"></div>
         </p>
    </form>
</body>

search.cssを使用します。

.button {
    background-image: url ('/image/btn.png') no-repeat;
    cursor:pointer;
}

何が問題なのでしょうか?

をインライン化してもうまくいかなかったようです。

解決方法は?

を除いて入力する必要があります。 image .

background: url('/image/btn.png') no-repeat;

両方の方法をテストして、こちらはうまくいきました。

<html>
    <head>
        <style type="text/css">
            .button{
                background: url(/image/btn.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>