As far as I know, the 'image' input type can only be used for a 'submit' button.
How do I make 'reset', 'print' and 'upload file' buttons on my form contain an certain image in them instead of being generic gray HTML buttons?
I gathered that I would need JavaScript for that, but is there any other (simpler) way to achieve it?

Thank you!

Recommended Answers

All 17 Replies

style the buttons
you can do anything in css

input.print {background:src(bla bla bla)}
<input class='print'>

has the appropriate image, you dont really need the image you can style the button itself, images take size, extra http calls, time

commented: That's why you make the big bucks... oh wait, we don't get paid for this do we? :P +1
commented: nice AB +6

style the buttons
you can do anything in css

input.print {background:src(bla bla bla)}
<input class='print'>

has the appropriate image, you dont really need the image you can style the button itself, images take size, extra http calls, time

So simple and great!
Never occurred to me.
Thank you!

style the buttons
you can do anything in css

input.print {background:src(bla bla bla)}
<input class='print'>

has the appropriate image, you dont really need the image you can style the button itself, images take size, extra http calls, time

Actually, I tried and it didn't work correctly:
http://eximi.net/Hawaii/html/contact_email.php

Here is my CSS:

input.print {
	background-image: url(../assets/images/print_btt.png);
	width: 119px;
	height: 47px;
}

input.upload {
	background-image: url(../assets/images/uf_btt.png);
	width: 119px;
	height: 47px;
}

input.reset {
	background-image: url(../assets/images/reset_btt.png);
	width: 119px;
	height: 47px;
}

Here is my HTML:

<tr>	
				<td>			
					<!--<input type="submit" name="submit" value="Submit" />-->
					<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />
					<input class="upload" type="file" name="uploadedfile" value="Upload file" />
					<input class="reset" type="reset" value="Reset" />
					<input class="print" type="button" onclick="window.print()" value="Print"> <br />
				</td>	
			</tr>

Set the following property in your classes-

border: none;
padding: 0px;
text-indent: -9999px;

Also, try setting the width and height properties on just the 'inputs' without the classes to make them fit.

sorry papanyquit, this happens often, no personal attack intended padding:0; zero has no dimension, dimensions may throw compliant browsers off and render in quirks mode
1px <> 1em <> 1%
0px = 0em = 0% == 0

I havent looked at prior solutions, this post may not be relevant to the thread

also have this attribute into <input type="button"

value=""

so as to remove the black text overlapping the button

sorry papanyquit, this happens often, no personal attack intended padding:0; zero has no dimension, dimensions may throw compliant browsers off and render in quirks mode
1px <> 1em <> 1%
0px = 0em = 0% == 0

I havent looked at prior solutions, this post may not be relevant to the thread

I didn't know that :o Thanks for the explanation!

also have this attribute into <input type="button"

value=""

so as to remove the black text overlapping the button

Thank you!
But you know what - the overlapping black text disappeared even without this.
I just added this:

border: none;
	padding: 0;
	text-indent: -9999px;

and it fixed the problem.
But... now my 'file' button disappeared altogether:
http://eximi.dreamhosters.com/Hawaii/html/contact_email.php
Here is the HTML:

<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />
					<input type="file" name="uploadedfile" class="upload" />
					<input type="reset" class="reset" />
					<input type="button" class="print" onclick="window.print()" />

Set the following property in your classes-

border: none;
padding: 0px;
text-indent: -9999px;

Also, try setting the width and height properties on just the 'inputs' without the classes to make them fit.

Thank you so much!
This fixed it. Except for the small problem - now my 'file' input control disappeared altogether. :)

This is what the form looks like now:
http://eximi.dreamhosters.com/Hawaii/html/contact_email.php

This is what I need it to look like:
http://www.polycysticliverdisease.com/html/contact_us.html

Here is the HTML:

<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />
					<input type="file" name="uploadedfile" class="upload" />
					<input type="reset" class="reset" />
					<input type="button" class="print" onclick="window.print()" />

Here is the CSS:

.print {
	background: transparent;
	background-image: url(../assets/images/print_btt.png);
	border: none;
	padding: 0;
	text-indent: -9999px;
}

.upload {
	background: transparent;
	background-image: url(../assets/images/uf_btt.png);
	border: none;
	padding: 0;
	text-indent: -9999px;
}

	
.reset {
	background: transparent;
	background-image: url(../assets/images/reset_btt.png);
	border: none;
	padding: 0;
	text-indent: -9999px;
}

input[type=button]
{
    width: 119px;
	height: 47px;
}

input[type=reset]
{
    width: 119px;
	height: 47px;
}

input[type=file]
{
    width: 119px;
	height: 47px;
}
<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />

should be changed to

<input type="image" src = "../assets/images/submit_btt.png" name="submit" id = "button"  />

Hopefully this will work

<input type="image" name="submit" id = "button" img src = "../assets/images/submit_btt.png" alt = "submit" />

should be changed to

<input type="image" src = "../assets/images/submit_btt.png" name="submit" id = "button"  />

Hopefully this will work

Yes, you are right! Thank you!
I overlooked it and was just wondering why the button wasn't working when your note came.
But actually I tried your code and it still didn't work, so for now I just replaced the 'image' input control with the 'submit', and it works:

<input type="submit" name="submit" class="submit" />

Set the following property in your classes-

border: none;
padding: 0px;
text-indent: -9999px;

Also, try setting the width and height properties on just the 'inputs' without the classes to make them fit.

Okay, here is the deal.
The buttons look differently in different browsers.
In Firefox you can see three of them and not 'file' input control.
In Internet Explorer none is seen.
In Chrome and Safari they all are seen, but the 'file' control is overlapped with the black text and the buttons are not lined up.
In Opera they all are seen and lined up, but the 'file' control is overlapped with the black text.
To make a long story short it's a mess. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.