is there a way to add an image to a regular <input type = "button" /> besides the text?
Yes - you should be able to set the background image on the button in CSS. My preferred method is to use the button tag e.g.
<button type="submit">text</button>
You can put any html you want within the tag and style it.
We can have css for button .
background: url(images/blue.png) ;
You want the "image" input type
<input type="image" src="/path/to/image.png" value="Click here" size="32,32" border="0" />
Button in HTML (For location I'd normally place all images in a images folder)
<BUTTON type="submit" src="/images/Button.png" value="">
Button via CSS, where myBtn is defined in the class file
<BUTTON type="submit" class="myBtn" value="">
Where myBtn is defined in the class file
.myBtn{
background: url(/images/Button.PNG) no-repeat;
cursor: pointer;
width: 140px;
height: 80px;
border: none;
}
<input type="button" style="background-image:url(flower.jpg)" value="Click">
It will set the background image for button using HTML.
An image in the button or an image as the button?
Image AS button:
<input type="image" src="/images/myImage.png" alt="An image as a button"/>
Image inside button....I don't think so.
Related
I've got a file submit form and I want to change how the buttons look. Previously, I've done it this way, by wrapping the form inputs into divs and then using CSS to make the divs look a certain way.
However, It doesn't seem to work for the file submit button #myFile. It just places the button inside of the div. Whereas the submit button looks how I want it to look. Anyway to fix this? I would like the Choose File button to look like the submit button. Just text, no gray oval.
<form id="dataform" action="submit" method="post" enctype="multipart/form-data">
<div id="btn_upload_data">
<input type="file" name="myfile" id="myFile"/>
</div>
<div id="btn_sub_data">
<input type="submit" id="data_submit" value="Submit File"/>
</div>
</form>
Some CSS:
div#btn_upload_data input {
cursor:pointer;
padding-top:40px;
padding-bottom:60px;
width:130px;
height:0px;
background-color:#a6e79b;
border: none;
text-align:center;
display:inline-block;
float:left;
white-space: pre-wrap;
}
Try using
#btn_upload_data input[type="file"] {
opacity: 0;
filter: aplha(opacity=0);
}
And then place a text inside the div as Choose File.
<div id="btn_upload_data" title="No File Chosen"> // if title needed
<input type="file" name="myfile" id="myFile"/>
Choose File...
</div>
There is no alternate way of editing it. It is a pre-defined input type file's style. That is set by the OS itself. So you cannot edit that! You need to override it completely.
I'm trying to create an image input that will change image from gatherHerb.jpg (default) to gatherHerb2.jpg when mousedown. The code actually works fine to do the intended but now a default sarif "Submit" is showing up over the image.
I've also tried setting value="" with no avail. Any help?
CSS first then HTML. Formatting is clearly an issue for me even on stack :(
#herbButton {
border-radius: 5px;
width: 100px;
height:30px;
background-image: url(buttons/gatherHerb.jpg)}
<input type="image" id="herbButton" onClick="herbClick();"
onMouseDown="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb2.jpg)'"<br>
onMouseUp="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb.jpg)'"<br>
/>
don't use image as background of image your input type
use src attribute of input type image in your code like this
#herbButton {
border-radius: 5px;
width: 100px;
height:30px;}
<input type="image" src="buttons/gatherHerb.jpg" id="herbButton" onClick="herbClick();" onMouseDown="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb2.jpg)'" onMouseUp="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb.jpg)'" />
change src url to your complete url.
your will find more Here
I think this will help you out,
<input value=" " type="image" id="herbButton" onClick="herbClick();" onMouseDown="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb2.jpg)'" onMouseUp="document.getElementById('herbButton').style.backgroundImage='url(buttons/gatherHerb.jpg)'" />
See the update: You should have a space in between value=" ",
So use value=" " instead of value=""
Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using
<input type="image" src="myimage.png">
But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.
if <input type="image"> doesn't work as expected just try instead
<button type="submit"><img src="myimage.png"></button>
but as I wrote in the comment above your code should work fine too
You have different possibilities for a submit button:
<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->
These are all submit buttons. Pick the one, which suits you best.
Now you can choose to put an image between the button or use background-images and position them properly.
Example for button with background-image:
button {
background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>
(Or as a fiddle)
Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css.
<button type='submit'>Informative submit text</button>
button {
background-image:url('myimage.png');
}
In case someone needs a newer html5 good answer:
<button id='' name='' value='' ><img src='img.jpg' /></button>
<input type="image" src="myimage.png">
or
<input type="submit" style="background:url(myimage.png)">
I have this plain submit button appearance in my html code
<input type="submit" name="pay now" value="pay" />
I wish to make the submit button look like this
<img src="images/shopping-cart/check-out-btn.png" border="0" />
but should stick with its submit type
how to do that ?
You should use CSS for that:
input[type="submit"] {
background: url(images/shopping-cart/check-out-btn.png);
width: 200px; /* width of image */
height: 50px; /* height of image */
border: 0;
}
You should probably use a more specific selector though.
A nice way to do this is using the button element.
<button type="submit"><img src="images/shopping-cart/check-out-btn.png" border="0" /></button>
It works just like a regular input with type=submit, but you have much more freedom.
You can make an image into a submit button by setting the type attribute of the input element to image:
<input type="image" src="/path/to/image.png">
For more information, read the image Button State section of the HTML specification.
I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.