Menu
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.
874
The default button in HTML can be changed to an image using CSS. The required button is selected using the respective CSS selector. The background property can then be set to include a background image and change the image type as required. The border of the button can also be removed to show only the image itself.
The image buttons in the HTML document can be created by using the type attribute of an <input> element. Image buttons also perform the same function as submit buttons, but the only difference between them is that you can keep the image of your choice as a button.
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> Just to add to the answers, I think the specific reason in this case, in addition to the misplaced no-repeat, is the space between url and (:
background-image: url ('/image/btn.png') no-repeat; /* Won't work */ background-image: url('/image/btn.png'); /* Should work */ If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
