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.
Related
I'm trying to use a custom image for a reset button on a form but can't get the default "Reset" text to disappear when I create a class and insert the background image. I'm using a table to create the form and here is the code for this part of the form:
<tr>
<td colspan=6>
<input type="reset" class=cancelButton>
</td>
</tr>
It seems pretty straight simeple and straight forward. Here is my CSS custom class code:
.cancelButton {
background-image: url(cancel.jpg);
width: 160px;
height: 35px;
display: block;
margin-left: auto;
margin-right: auto;
}
This is what I get:
Any assistance would be appreciated. This is for an assignment so I can't take shortcuts.
Don't use background images to convey information. CSS is for presentation.
Use a regular image, and a button element instead of an input element (since a button element can contain the image).
<button type="reset"><img src="cancel.jpg" alt="Cancel"></button>
Add value="" to your input tag
<input type="reset" value="" class=cancelButton>
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.
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 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.
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.