html - How to add background image for input type="button"?

Question

Welcome To Ask or Share your Answers For Others

html - How to add background image for input type="button"?

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - How to add background image for input type="button"?

i've been trying to change the background image of the input button through css, but it doesn't work.

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

what could be wrong?

even inline-ing the css didn't seem to work.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T23:59:34+0000

You need to type it without the word image.

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

Tested both ways and this one works.

Example:

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

Categories

html - How to add background image for input type="button"?

html - How to add background image for input type="button"?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags